代码之家 › 专栏 › 技术社区 › Zach Smith

三个div在一个容器div-如何获得高度是自动的?

css

Zach Smith · 技术社区 · 15 年前

我有一个父div,其中有三个div用于创建列效果:

#container {
  height:230px;
  float:left;
}
#container_colone {
  float:left;
  width:40%;
  height:auto;
}
#container_coltwo {
  float:left;
  width:40%;
  height:auto;
}
#container_colthree {
  float:right;
  width:40%;
  height:auto;
}

在此处使用html

<div id="container">
  <div id="container_colone">
    col one here
  </div>
  <div id="container_coltwo">
    col two here
  </div>
  <div id="container_colthree">
    col three here
  </div>
</div>

因为我正在设置容器中的高度,所以我希望此容器中的所有列具有相同的高度。所以如果我把容器div设置为400000000px,所有三个col的高度都是一样的。

上面的代码并没有削减它,我需要帮助来理解我需要做什么,这样我可以在未来很快得到这个。

任何帮助都将不胜感激!

2 回复 | 直到 15 年前

Kangkan 15 年前

将CSS更改为:

    #container {
    height:230px;
    float:left;
    }
    #container_colone {
    float:left;
    width:30%;
    height:100%;
    }
    #container_coltwo {
    float:left;
    width:30%;
    height:100%;
    }
    #container_colthree {
    float:right;
    width:30%;
    height:100%;
    }