Допустим, есть у нас блок с заданной высотой, а в нём есть несколько элементов. Их может быть сколько угодно, они могут быть какой угодно высоты. Как бы их упорядочить, чтобы все они были на равном расстоянии друг от друга?

В общем, хочется аналога text-align: justify, но по вертикали.
Задавать каждому блоку фиксированную высоту? Не вариант, внутри может быть одна буква, а может и картинка. Задавать margin-bottom каждому дочернему элементу? Тоже не вариант, опять же из-за того, что мы не знаем высоты элементов.




То, что нам нужно, дают таблицы, которые нынче не модно использовать (и правильно, что не модно). Все элементы внутри <td></td> выглядят почти так, как нам нужно:

Но есть одно но. Хотелось бы, чтобы верхний элемент был прижат к верхнему краю, а нижний — к нижнему. Сначала расправимся с верхним элементом, а именно зададим всем элементам <td> свойство vertical-align: top;:

Итак, уже лучше, осталось сделать то же самое с нижним элементом. Но ему уже нельзя поставить vertical-align, иначе всё будет выглядеть неровно. Сделаем небольшую хитрость: напишем, будто нижний элемент должен иметь высоту 1px. Браузер не сделает элемент действительно однопиксельным, но он сожмёт его настолько, насколько это возможно. Итак, td:last-child { height: 1px; }:

Итак, мы получили точно то, что хотели. Но стоп, ведь это таблицы, а нам нужны div-ы! Самый простой вариант — это заменить table на div с display: table, и создать вложенные div с display: table-row и display: table-cell. Целых три вложенных div-а, ну куда столько? Максимум два, и не больше!

Окей, оставим только display: table-row, а обычные клетки уберём. С таким элементом уже не получится сделать разных красивостей вроде бордюра, но это даёт нам то, что мы хотим.

Итак, пример:

И вот код этого примера:

Проверял только в свежих версиях firefox (8 и выше), chrome (15 и выше) и opera (10.52 и выше). IE — ну вы поняли.