Вёрстка « Выравнивание блоков по-низу

При верстке нескольких блоков, имеющих разную высоту, мы получаем выравнивание по-верху:
<div>
    <div>Sample text</div>
    <div>Sample text<br>Sample text<br>Sample text<br>Sample text</div>
    <div>Sample text</div>
  </div>


А возможно ли без использования таблиц получить блоки выравненные по низу?
0
html верстка

1 ответов

У Тёмы в техногрёте был поднят этот вопрос: http://www.artlebedev.ru/tools/technogrette/html/vertical-align/

2

Без float, overflow, псевдотаблиц и прочей нечисти:

.block{
    display: -moz-inline-box; display: inline-block; *zoom: 1; *display: inline;
    vertical-align: bottom;
}
Ближе к варианту artuska

уточню: первая строка в css - это кроссбраузерный inline-block, с его помощью можно сделать очень много интересных вещей.

display: -moz-inline-box; для firefox 2
*zoom: 1; *display: inline; для IE
4

Для приведенного ХТМЛ-кода задаем вот эти стили:

div div {
 display: inline-block;
 vertical-align: bottom;
 _display: inline;
 _zoom: 1;
}
Всё. Проверено от ИЕ5.5 и выше.
1

Интересная информация . ...

-2

Если очень хочется сделать через CSS -- читать здесь: http://3ds.habrahabr.ru/blog/62161/
А если желательно, чтобы работало и в относительно старых браузерах -- таки таблицы надёжнее.

0

Эта задача не имеет на данный момент нормального решения. CSS-тег vertical-align: bottom; действует только на блочные элементы, каковыми div не является. Поддержка CSS-тега display:table-cell; не реализована в IE. Да и в остальных браузерах реализовано все по-своему. Решения, которые можно найти в интернете, не являются кросс-браузерными и, зачастую, глючат даже при переходе от одного билда браузера к другому, не говоря про версии. Поэтому, если не удается сделать выравнивание с помощью padding и margin, то я спокойно использую таблицы: код увеличивается на несколько байт, а я сплю спокойно, зная, что при смене версии браузера у моих клиентов ничего не разъедется. Чего и Вам желаю :)

1

Самый простой способ, который пришел в голову - комбинирование absolute и relative позиционирования.

К примеру:

<style type="text/css">
  #header { position: relative; }
  #header-content { position: absolute; bottom: 0; left: 0; }
</style>
<div id="header">
  <h1>Заговловок</h1>
  <div id="header-content">Содержимое</div>
</div>

Возможно вам подойдет такое решение, однако в купе с остальной версткой данный вариант вам может не подойти, в частности в вопросах использования дальнейшего позиционирования относительных элементов (это к примеру выпыдающие менюшки).
0
#div1{
position: absolute;
bottom: 0px;
}

Или так.

#div1{
margin-top: Xpx;
}
Может кто предложит варианты получше. Сам бы хотел узнать.
0