HTML/CSS 将 div 设置为兄弟的高度

Question

我在第三个中包含 2 个 div。其中一个包含的 div 向左浮动，另一个向右浮动。我希望 2 个同级 div 始终处于同一高度，但我对此有疑问。到目前为止，我只在 Firefox 中查看该页面，并且认为在至少在一个浏览器中运行后我会担心任何跨浏览器问题。

这是标记:

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

这是 CSS:

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

如果#left-div中的内容长于 500px , #right-div不会扩展以匹配。在我试过的一个例子中，Firefox 表示 #main-container 的计算样式高度是804px , #left-div 的计算样式高度是800px ，以及 #right-div 的计算样式高度是586.2px ，因为它已经扩展以适应它自己的内容。

我知道我可能会以错误的方式解决这个问题，如果这是重复的问题，那么我深表歉意，但我不太确定要搜索什么。

Answer 1

我可以绞尽脑汁，但我认为这真的只能使用表行为来解决，即使用 <table> s (如果你需要 IE6 and IE7 compatible )或 display: table / table-row / table-cell (这实际上是一回事，但不会让你在同行面前难堪，因为 table 是邪恶的。;)。

我会去找张 table 。

随时证明我是错的并发布一个明智的 CSS 解决方案，我会很高兴!