Высочайший div определяет высоту строки

Question

Мне нужно создать ряд из 3 делителей с переменной высотой, но все они должны быть выровнены по низу строки, а строка должна быть высотой самого высокого дочернего деления.

Вот пример того, что я имею в виду.

http://cl.ly/997cd739550635df3bbf

Вот что я пытался:

div1 {
position: absolute;
bottom: 0;
left: 0;
}

.div2 {
height: 100%;
float: left;
width: 300px
position: relative;
}

.row {
}

Но если я не установлю высоту .row, все стеки div2s друг над другом. Можно ли как-нибудь изменить высоту строки в зависимости от самого высокого дочернего элемента div?

Answer 1

Проблема в том, что вы используете position:absolute (и position:relative), когда вам нужно только использовать div.

position:absolute Помимо фиксирования положения элемента div на странице, он выводится из обычного потока страницы (то есть помещается в другой слой), что является причиной того, почему ваши элементы div укладываются.

Я предлагаю пометить div с display:inline-block и использовать vertical-align:bottom вместо bottom.

Answer 2

А как насчет CSS:

display: inline-block;
vertical-align: bottom;