高度相同的两列布局，table还是div？

Question

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

对于表，我会简单地这样做：

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

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

有了div，有一些解决方案(涉及overflow的使用:隐藏等)需要很多技巧才能很好地跨浏览器工作。

(jsFiddle地址：http://jsfiddle.net/rJjJa/1/)

在这种情况下，我将简单地使用table，而不需要额外的CSS hack(或大量额外的标记)。你觉得这张桌子合适吗？

Answer 1

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

Answer 2

标签<table>对于布局来说已经过时了！不要使用它。

取而代之的是，有许多跨浏览器CSS兼容2列布局，而不使用任何hack。其中之一就是Equal height columns。

等高列

每列中有多少内容并不重要，背景颜色将始终延伸到最高列的高度。

这里详细解释了一篇文章：Equal Height Columns with Cross-Browser CSS。