水平溢出容器 div 但不垂直溢出答案

【问题标题】：Overflowing a container div horizontally but not vertically水平溢出容器 div 但不垂直溢出
【发布时间】：2011-07-27 10:34:21
【问题描述】：

我正在开发一个在容器内使用两列的网站。容器有一个白色背景，应该延伸到最高列的底部，所以我使用holy grail 方法。

但是，两列的位置应使其一部分超出白色背景（this example 使用固定高度，应该是流动的）。据我所知，这只能通过将溢出设置为可见来完成，但这会破坏列的相等高度。

如何使用尽可能少的附加元素来解决此问题？

【问题讨论】：

标签： html css overflow

【解决方案1】：

在这种情况下，最简单的解决方法似乎是在 #container 的结束标记之前添加 <br style="clear:both" />。

如果您愿意，可以将其更改为 <br class="clearfix" /> 和 .clearfix{clear:both}。

【讨论】：

哇，就这么简单？我一直尽我所能避免空的 clearfix 元素（99% 的时间有一个更优雅的解决方案）但这显然是该规则的例外。非常感谢！

【解决方案2】：

解决方案是使用inline-block 元素..

CSS

.container{
    width:300px;
    background-color:#ccc;
    margin:0 auto;
    border:1px solid red;
}
.container > div{
    width:150px;
    display:inline-block;
    vertical-align:top;
}
.inner{
    background-color:#666;
    margin-top:10px;
    width:130px;
}
.left .inner{
    margin-left:-10px;
}
.right .inner{
    margin-right:-10px;
    margin-left:auto;
}

HTML

<div class="container">
    <div class="left">
        <div class="inner">left 1st inner panel</div>
        <div class="inner">left 2nd inner panel</div>
    </div><div class="right">
        <div class="inner">right 1st inner panel</div>
        <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
    </div>
</div>

view demo

【讨论】：

另一个答案已经奏效，但 +1 是一个不错的解决方案。不幸的是，我仍然必须支持 IE7（谢天谢地没有 6），它不能很好地处理内联块。
@Stephan，感谢上帝让 IE6 终于摆脱了困境。关于 IE7 和 inline-block 看看 brunildo.org/test/InlineBlockLayout.html 只是为了未来的选择;)