text-align: justify по вертикали
10.12.2011 в Руководства
Допустим, есть у нас блок с заданной высотой, а в нём есть несколько элементов. Их может быть сколько угодно, они могут быть какой угодно высоты. Как бы их упорядочить, чтобы все они были на равном расстоянии друг от друга?
В общем, хочется аналога 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 - ну вы поняли.
В общем, хочется аналога text-align: justify, но по вертикали.
Задавать каждому блоку фиксированную высоту? Не вариант, внутри может быть одна буква, а может и картинка. Задавать margin-bottom каждому дочернему элементу? Тоже не вариант, опять же из-за того, что мы не знаем высоты элементов.
То, что нам нужно, дают таблицы, которые нынче не модно использовать (и правильно, что не модно). Все элементы внутри <td></td> выглядят почти так, как нам нужно:
| Элемент 1 |
| Элемент 2 |
| Элемент 3, подлиннее, например |
Но есть одно но. Хотелось бы, чтобы верхний элемент был прижат к верхнему краю, а нижний - к нижнему. Сначала расправимся с верхним элементом, а именно зададим всем элементам <td> свойство vertical-align: top;:
| Элемент 1 |
| Элемент 2 |
| Элемент 3, подлиннее, например |
Итак, уже лучше, осталось сделать то же самое с нижним элементом. Но ему уже нельзя поставить vertical-align, иначе всё будет выглядеть неровно. Сделаем небольшую хитрость: напишем, будто нижний элемент должен иметь высоту 1px. Браузер не сделает элемент действительно однопиксельным, но он сожмёт его настолько, насколько это возможно. Итак, td:last-child { height: 1px; }:
Таблица с бордюрами
| Элемент 1 |
| Элемент 2 |
| Элемент 3, подлиннее, например |
Таблица без бордюров
| Элемент 1 |
| Элемент 2 |
| Элемент 3, подлиннее, например |
Итак, мы получили точно то, что хотели. Но стоп, ведь это таблицы, а нам нужны div-ы! Самый простой вариант - это заменить table на div с display: table, и создать вложенные div с display: table-row и display: table-cell. Целых три вложенных div-а, ну куда столько? Максимум два, и не больше!
Окей, оставим только display: table-row, а обычные клетки уберём. С таким элементом уже не получится сделать разных красивостей вроде бордюра, но это даёт нам то, что мы хотим.
Итак, пример:
А теперь - внутри <div>
Можно вставлять текст.
Можно вставлять блоки. Большие блоки с большим количеством текста, чтобы распирало.
Такие дела
И вот код этого примера:
Проверял только в свежих версиях firefox (8 и выше), chrome (15 и выше) и opera (10.52 и выше). IE - ну вы поняли.
