Html 水平而非垂直溢出容器div

我在一个网站上工作，它在一个容器中使用两列。容器有一个白色的背景，应该延伸到最高的列的底部，所以我使用这个方法

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

---

如何使用尽可能少的附加元素修复此问题？

在这种情况下，最简单的修复方法似乎是在

#container

的结束标记之前添加

---

如果愿意，您可以将其更改为

和

.clearfix{clear:both}

。

解决方案是使用

内联块

元素

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>

左第一内板
左第二内板
右第一内板
右第二个内部面板，带有任意文本，以显示父元素的增加

---

哇，有那么简单吗？我一直尽力避免使用空的clearfix元素（99%的情况下有更优雅的解决方案），但这显然是该规则的例外。非常感谢！另一个答案已经起作用了，但是+1是很好的解决方案。不幸的是，我仍然必须支持IE7（感谢上帝，第6条），因为它不能很好地处理内联块。@Stephan，感谢上帝，IE6终于出局了。。关于IE7和

内联块

请看一看，仅供将来选择；）