html - float 在容器 div 上的两列 css 设置

Question

下面显示了一个非常简单的两列设置。

但是在示例一中，我设置了两列，#left 和#right div 将 float 在#posts 容器上方。

示例 2 不会像这样 float ，但不是我正在寻找的两列设置。有什么建议吗？

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 会导致该元素在所有现代浏览器中都包含 float 。唯一一次(据我所知)这可能会导致问题是，如果存在某些约束(可用空间有限、内容过大的显式宽度/高度等)，这使得自动滚动条不受欢迎，但这并不常见. (事实上​​ ，在这些情况下，自动滚动条通常是一件好的事情。)