html - 无论内容如何，​​使两列高度相同

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;

您可以查看此 fiddle 中的标记/CSS 和结果:http://jsfiddle.net/aeinbu/QDBff/35/