html - 具有相同高度，表格或 div 的两列布局？

Question

我需要一个包含两列的布局，其中每列扩展到较高列的高度。

对于表格我会简单地做:

<table class="parent">
    <tr>
        <td class="columnLeft">Column 1</td>
        <td class="columnRight">Column 2</td>
    </tr>
</table>

第 1 列和第 2 列将保持相同的可变高度。

对于 div 有一些解决方案(涉及使用 overflow:hidden 等)需要许多 hack 才能在跨浏览器上正常工作。

(此处为 jsFiddle:http://jsfiddle.net/rJjJa/1/)

在这种情况下，我会简单地使用表格，而不需要额外的 CSS hack(或大量额外标记)。你认为 table 适合这个吗？

Answer 1

如果您希望 div 表现得像一个表格，您可以为每个 div 使用 display: table-cell;。它们的行为应该像 td;两者的高度应该相同。这应该适用于所有现代浏览器和 ie8 及更高版本。