html - 如何显示 : table-cell be the same height with my CSS?

Question

我有以下 HTML:

<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
    <div style="display: table-row">
        <div class="grid_6" style="display: table-cell;">
            <div class="block-border">
                <div style="background-color: red; height: 100px;"></div>
            </div>
        </div>
        <div class="grid_6" style="display: table-cell;">
            <div class="block-border">
                <div style="background-color: red; height: 200px;"></div>
            </div>
        </div>
    </div>
</article>

我正在使用 display: table-row，因为我听说这会使我的 DIV 像表格单元格一样工作，而且我希望 DIV 具有相同的高度。然而，似乎第一个 grid_6 网格的高度很小，而第二个网格至少有 100px。我怎样才能让它填充到相同的高度？

这是一个例子:fiddle

Answer 1

<div class="block-border">
        <div style="background-color: red; height: 100px;"></div>

您已经设置了第二个元素的高度，即 Height = 100px 。

为两个 div 元素设置高度。