2

我有以下 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。我怎样才能让它填充到相同的高度？

这是一个例子：小提琴

4

2 回答 2

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

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

将高度设置为两个 div 元素。

于 2013-02-13T14:10:46.330 回答
0

两个 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>

于 2013-02-13T14:54:47.650 回答