Question

我在下面有一个非常简单的两栏设置。

然而，在我有两列设置的示例中，＃left和#right div将浮动在#posts容器之上。

示例2不会像这样浮动，但不是我正在寻找的两个列设置。建议？

div#posts 
{
   width: 700px;  
   margin: 0 auto;  
   margin-top: 5px;
   margin-bottom: 0px;  
   padding: 5px;  
   border: 1px solid #CCC;  
   background-color: #EEE;  
} 

div#left {
   float:left;
   width:100px;
   background:#EEE;
}

div#right {
   float:right;
   width:500px;
   background:#EEE;
}


<!-- example 1 

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
</div>

<!-- example 2

<div id="posts">
    <div>post</div>
    <div>post</div>
</div>

Answer 1

只需将overflow: auto;添加到您的div#posts规则中。

将overflow属性设置为auto会产生副作用，导致该元素在所有现代浏览器中都包含浮点数。唯一一次（我知道）这可能会导致问题是，如果存在一些约束（可用空间有限，显示宽度/高度与超大内容等），这会使自动滚动条不受欢迎，但这不常见。（事实上，在这些情况下，自动滚动条通常是好的事物。）

Answer 2

[编辑：好的，忘了]

正确的方法是在Posts div中添加一个div，但是在属性为clear的列之后：both;

例如：

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
    <div style="clear: both;"></div>
</div>

大多数人为此目的保留.clear类（.clear {clear：both;}）。它经常出现。

Answer 3

如果它是跨浏览器兼容的，那么

Overflow:auto将是一个优雅的解决方案。如果我没记错的话，它会在IE6 / 7上引起一些问题。

有关溢出自动/隐藏的更多信息 http://www.wickham43.supanet.com/tutorial/scrollingdivs.html

浮动在容器div上的两列css设置

3 个答案: