html - 仅使用 CSS 等同所有 div 的高度

Question

我已经使用了 display:table 属性，但表格单元格的高度仍然不相等。有没有办法在不使用 JavaScript 或 jQuery 的情况下使它们相等？必须牢记 Internet Explorer 兼容性。

<div class="envelope">
    <div class="fill col">
        ABC
        <br><br><br>
    </div>
    <div class="fill ">DEF</div>
    <div class="fill col">
             XYZ
             <br><br><br>
             <br><br><br>
    </div>
</div>

这是CSS

.envelope{
    border:1px solid #000;
    border-radius:5px;
    display:table;
    width:300px;

}

.fill{
    background:#dddddd;
    border-right:1px solid #000;
    float:left;
    width:30%;
    padding:1%; 
    display:table-cell;
}

.col{
    background:#ff44ff;
}

https://jsfiddle.net/sayrandhri/yt18kLos/

Answer 1

每个人都回答了，但没有人说为什么会这样:

• 当您使用 float 属性时， float 元素将从正常流中取出并放置在其容器的左侧或右侧。

float 可以修改显示值的计算值:

• 在您的情况下，display: table-cell 变成了 display: block。
• 所以，是的，如果您不想设置 height 值(可能是因为它被计算为 display:block)，那么具有相同高度的解决方案删除 float:left