html - 无法让 DIV 的高度相等

Question

虽然通常很简单，但出于某种原因，如果不使用 min-height 或 jQuery，我似乎无法连续获得三个 div 的相同列高。

我正在尝试在主 div 上使用 display:table 并在子 div 上使用 display:table-cell。我不知道出了什么问题。我还尝试了其他解决方案，例如display:inline-block; 和 :before { content:""}; 如其他几篇文章中所建议。

<div class="row">

<!-- 3 times in a row, other two blocks cut here for overview on SO -->

<div class="columns small-12 medium-4 large-4">
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>  
</div>
</div>

Fiddle

 .large-4 {
    width: 33.33333%;
display:table; }


.highlighted-contentblock
{
    background:gray;
    display:table-cell;
}

Fiddle

Answer 1

问题

看起来最初的问题是试图将 table-cell 应用于类 highlighted-contentblock 而不是列。列类是您的行类的第一个子类，应该在那里应用表格单元格。

列

您在列上显示了表格(应用于 highlighted-contentblock 类)。我将其替换为应用于列类的表格单元格。

间距

Float 会移除边距，所以我移除了它并在您的表格上使用了边框间距。

支持

这有效但在 IE 7 中无效。CSS tricks has more info .

单击下面的运行代码片段以查看其运行情况。

/* Foundation replacement */
.row {
    padding-bottom:10px;
    max-width:980px;
    margin:0 auto;
    display:table;
    border-spacing:0.9375rem;
 }

.columns {
    box-sizing:border-box;
    display:table-cell;
    background:gray;
 }

.large-4 {
    width: 33.33333%;
 }

<div class="row">
    
<div class="columns small-12 medium-4 large-4">
    
<div class="highlighted-contentblock">
    <a href="#" target="_blank">
        <div class="contentheader">
            <div class="sequence">
                1
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem
    </a>
</div>
    
</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                X
            </div>
            <h2>
                Lorem ipsum <br/> Lorem ipsum
            </h2>
        </div>
        Lorem ipsum</a>
</div>

</div>

<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
    
<div class="highlighted-contentblock">
    <a target="_blank" href=#>
        <div class="contentheader">
            <div class="sequence">
                3
            </div>
            <h2>
                Lorem ipsum
            </h2>
        </div>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a>
</div>

</div>

</div>