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

问题描述

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

使用表格我可以简单地做到：

 < table class =parent> 
< tr> 
< td class =columnLeft>第1列< / td> 
< td class =columnRight>第2列< / td> 
< / tr> 
< / table> 
  

以及第1& 2将保持相同的变量高度。

使用div有一些解决方案（涉及使用overflow：hidden和更多），需要很多黑客才能很好地跨浏览器。

（jsFiddle here： http://jsfiddle.net / rJjJa / 1 / ）

在这种情况下，我只需使用table，而不需要额外的CSS hack（或大量额外的标记）。你认为table是否适合这个？

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

I need a layout with 2 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>

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

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

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

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?

解决方案

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.

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