不带孩子宽度或高度的元素

Question

我经常遇到这个问题，但从来没有理解是什么导致了这个问题。

<div id="wrapper">
    <div id="primary">content</div>
    <div id="secondary">content</div>
 </div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

然后你看看Chrome的inspect元素上的属性，包装div显示为0px高度和0px宽度。

Answer 1

这通常被称为clearfix问题。在下面放置一个内联样式div的替代方法是将overflow:hidden分配给包装器div。

有关清除问题的详细信息，请查看A List Apart: CSS Floats 101（具体为Section 6: Collapsing）

Answer 2

您需要在<div style='clear:both'></div>下方添加<div id='secondary'/>。 CSS标记“float”不允许父级查看子级实际结束的位置。添加清除任何浮动的左侧和右侧的div允许父元素正确填充空间。

Answer 3

你需要尝试使用浮点数清除div，所以试试这些，在第二个div之后添加<div>，然后将style="clear:both"添加到我刚才所说的创建为样式的div中，或者你可以简单地指定确切的高度＆amp;包装div的宽度，让我知道会发生什么。祝你好运！