Html 仅使用CSS就等于所有div的高度

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

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

---

我已删除了浮动：left

删除浮动：left将解决您的问题：

---

移除<代码>浮动：左将解决您的问题

CSS

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

---

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

• 使用

  float

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

float

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

• 在您的情况下，

  display:table单元格

  将成为

  display:block

• 因此，如果您不想设置

  高度

  值（可能是因为它被计算为

  display:block

  ），那么可以使用相同高度的解决方案删除

  float:left

---

为什么使用float属性？如果你浮动它，那么你就不会有相同的高度，如果你推迟浮动，它会工作你应该支持什么版本的IE？@francesco es:在小提琴中，让我看看它是否在生产环境中工作。：）顺便说一句，在那之后我告诉过你，有人用我的hint回答了这个问题吗？你也可以研究一下这个问题吗？

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

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