Есть ли способ сделать divs высотой линии

Question

У меня есть несколько divs на одной строке. Дивы имеют ширину, но не имеют явной высоты. Они получают свой рост от количества текста, который они содержат. Один из divs имеет намного больше текста, чем другие, но я бы хотел, чтобы все они были одинакового роста.

Например, в this скрипке Я бы хотел, чтобы ящики 1, 2, 3 и 5 были одинаковой высоты, как в блоке 4, без добавления каких-либо дополнительных элементов или с использованием жесткой кодированной высоты, и она должна работать в IE8. Это возможно?

Может быть что-то вроде:

height: line-height; /* i know this isn't a real property */ 

Answer 1

Измените display:inline-block в display: table-cell:

jsFiddle example

И если вам нужно возиться с расстоянием между ячейками вы может обернуть их контейнер и применять границы расстояния к нему:

jsFiddle example

Answer 2

Если кто-то хочет использовать последние свойства CSS затем Flexbox является путь ....

body > div { /* Give an id or a class to your wrapper div */ 
    display: flex; 
} 

Так уверен, вы должны иметь элемент-обертку/div, поэтому просто назначьте display: flex;, и вы закончите.

<!-- Flex wrapper --> 
<div> <!-- <-- Add this --> 
    <div>BOX 1</div> 
    <div>BOX 2</div> 
    <div>BOX 3</div> 
    <div>BOX 4 - But this box has more text</div> 
    <div>BOX 5</div> 
</div> 

Если вы хотите интервала (я думаю, что вам не нужно это, один в вашем примере кажется пробел вопрос), но если вам нужно, то я обеспечил запас для дочерних элементов.

Demo