僅使用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

Answer 2

像這樣更新css

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

我刪除了float:left

Answer 3

刪除float：left將解決您的問題：

https://jsfiddle.net/yt18kLos/1/

.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;
}

Answer 4

移除float:left; 會解決你的問題

CSS

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