Выравнивать высоту всех divs, используя только CSS

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 может изменить расчетную величину значений отображения:

• В вашем случае 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

Re перемещение поплавка: левый будет решить вашу проблему:

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