Question

假设我有这个HTML：

<div id="container">
    <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>

...而且这个CSS：

#container {
    border:1px #ff0000 solid;
    position:relative;
}

#container .child {
    width:200px;
    height:200px;
    background:#f5f5f5;
    float:left;
}

如果不使用“浮动”，有没有人知道如何使#cocket的高度伸展到所有DIV与class.child的集体高度？

http://jsfiddle.net/TLxxR/

如果有人想知道为什么，我试图将#container（例如：http://jsfiddle.net/TLxxR/1/）作为中心，并使用“float：left”来移除居中。

Answer 1

#container {
    border:1px #ff0000 solid;
    position:relative;
    overflow: hidden;
}

添加溢出隐藏将清除您的浮动

编辑：添加overflow：auto如果发现其他元素被截断，也会清除浮动

Answer 2

您需要使用clearfix：

#container:after {
   display: table;
   content: '';
   clear: both;
}

它们的复杂性取决于您的应用程序需要支持的浏览器，但上述内容应该可以帮助您入门。

Here's a great article更好地解释了它的细节。

这是一个jsFiddle Demo。

Answer 3

您可以在上次<div style="clear: both"></div>之后添加.child。

Answer 4

只需将父级设置为display：inline-block，它将随子项一起展开。

#container {
  border:1px blue solid;
  position:relative;
  display: inline-block;
}

父容器的高度不适合儿童伸展？

4 个答案: