Question

我使用了display：table属性，但是table-cells的高度仍然不相同。有没有办法在不使用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可以修改显示值的计算值：

在您的情况下，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;
}

使用CSS等同所有div的高度

4 个答案: