两列具有相同高度，表格或div的布局? [英] Two columns layout with same height, table or div?

问题描述

我需要一个具有两列的布局，其中每一列都扩展到较高的列的高度.

I need a layout with two columns where each column expand to the height of the taller column.

使用表格，我会简单地做:

With table I would simply do:

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

第1列& 2将保持相同的可变高度.

And column 1 & 2 will keep the same variable height.

使用div，有一些解决方案(涉及使用overflow:hidden等)，需要许多技巧才能使跨浏览器正常工作.

With div there are some solution (involving use of overflow:hidden and more) that needs many hacks to work well cross-browser.

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

(jsFiddle here: http://jsfiddle.net/rJjJa/1/)

在这种情况下，我将只使用表，而无需CSS hack的额外努力(或大量额外的标记).您认为桌子适合吗?

In this case I would simply use table, without needing the extra effort of CSS hacks (or lots of extra markup). Do you think table is fine for this?

推荐答案

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

If you want divs to behave just like a table, you could use display: table-cell; for each div. They should behave just like a td; both should be the same height. This should work in all modern browsers and ie8 and above.

这篇关于两列具有相同高度，表格或div的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！