仅使用 CSS 使所有 div 的高度相等答案

【问题标题】：Equate height of all divs using just CSS仅使用 CSS 使所有 div 的高度相等
【发布时间】：2015-07-27 15:22:05
【问题描述】：

我使用了 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/

【问题讨论】：

philipwalton.github.io/solved-by-flexbox/demos/grids
你为什么使用 float 属性？如果你浮动它，那么你将不会有相同的高度，如果你推迟浮动，它会起作用
你应该支持什么版本的IE？
@francesco-es ：在小提琴中它可以工作，让我看看它是否在生产环境中工作。 :)
顺便说一句，在那之后我告诉过你，任何人都用我的提示回答了

标签： html css

【解决方案1】：

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

当您使用float 属性时，浮动元素取自正常流，并沿其容器的左侧或右侧放置。

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

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

【讨论】：

您也可以看看这个问题吗？ stackoverflow.com/questions/31602011/…

【解决方案2】：

删除 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;
}

【讨论】：

【解决方案3】：

删除float:left; 将解决您的问题

CSS

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

【讨论】：

【解决方案4】：

像这样更新css

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

我已经删除了float:left

【讨论】：