无论内容如何,​​使两列具有相同的高度

Question

我有一个基本的网格系统,非常基本的,它在一个流畅的"行"中并排放入"单元格".我希望两个单元格总是匹配它们的高度,所以它们是相同的.因此,如果一个内容比另一个更多,则另一个扩展以匹配具有更多内容的单元格的高度.

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

这里的问题演示:http://jsfiddle.net/QDBff/

Answer 1

如果绝对必须避免使用TABLE,则可以将div设置为与表格相似

display: table;
display: table-row;
display: table-cell;

你可以看一下这个小提琴的标记/ css和结果:http://jsfiddle.net/aeinbu/QDBff/35/