问题描述
我需要一个具有两列的布局,其中每一列都扩展到较高的列的高度.
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 div
s 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的布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!