1

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

使用表我会简单地做：

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

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

使用 div 有一些解决方案（涉及使用溢出：隐藏等）需要许多技巧才能跨浏览器正常工作。

（这里的jsfiddle：http: //jsfiddle.net/rJjJa/1/）

在这种情况下，我会简单地使用表格，而不需要额外的 CSS hacks 工作（或大量额外的标记）。你觉得桌子适合这个吗？

4

2 回答 2

4

如果你想让divs 表现得像一张桌子，你可以使用display: table-cell;for each div。它们的行为应该像td; 两者应该是相同的高度。这应该适用于所有现代浏览器和 ie8 及更高版本。

于 2012-11-21T16:09:15.640 回答
2

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

相反，有许多跨浏览器 CSS 兼容 2 列布局，没有使用任何 hack。其中之一是Equal height columns。

等高列

不管每列有多少内容，背景颜色都会一直延伸到最高列的高度。

一篇文章，在这里详细解释：使用跨浏览器 CSS 的等高列。

于 2012-11-21T12:50:37.843 回答