HTML / CSS将div设置为同级的高度

Question

我有三分之二的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和IE7兼容）或display: table / table-row / table-cell（实际上是同一件事，但不会让您感到尴尬）在您的同伴面前，因为桌子是邪恶的。