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元素。

Answer 2

grid_6元素的高度都相同。你看到一个比另一个更大的红色矩形的原因是你正在为内部div着色。如果将颜色放在grid_6元素上 - 它们是相同的。 http://jsfiddle.net/A7yXc/

<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; background-color: red;">
        <div class="block-border">
            <div style="height: 100px;">das</div>
        </div>
    </div>
    <div class="grid_6" style="display: table-cell; background-color: red;">
        <div class="block-border">
            <div style="height: 200px;">das</div>
        </div>
    </div>
</div>

如何进行显示：table-cell与CSS的高度相同？

2 个答案: