Ровные строки блоков с непостоянной высотой

Задача

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

Решение

У нас имеется HTML-код:

<div>
    <h3>Прости мне, милый друг</h3>
    Двухлетнее молчанье: Писать тебе посланье мне было недосуг. На тройке пренесенный из ...
</div>
<div>
    <h3>От утра до утра</h3>
    Два года всё кружился без дела в хлопотах зевая, веселился...
</div>
<div>
    <h3>В театре, на пирах</h3>
    Не ведал я покоя, увы! ни на часок, как будто у налоя в великой четверток измученный дьячок ...
</div>
<div>
    <h3>Заботы и печали</h3>
    Которые играли, стыжусь, столь долго мной; и в тишине святой философом ленивым ...
</div>>
<div>
    <h3>С диваном, с камельком</h3>
    Три комнатки простые - в них злата, бронзы нет, и ткани выписные не кроют их паркет...
</div>
<div>
    <h3>Где мне в часы полдневны</h3>
    Березок своды темны прохладну сень дают; где ландыш белоснежный сплелся ...
</div>

Этот код описывает последовательность блоков, которые имеют некоторое содержание. Количество текста в каждом блоке своё. Эти блоки имеют ширину (пусть в нашем случае это будет 33% от родительского элемента). Для того, чтобы их выровнять в одну линию, к ним применяется левое обтекание:

div {width: 33%; float: left}

Это отображается в браузере следующим образом:



Но вот, что будет, если в первой колонке окажется много текста:



Для борьбы с ошибками обтекания предлагается следующее решение:

Шаг первый

Представим строчки, которые мы хотим получить в виде обычных текстовых строк. И воспользуемся «чудесным» значением свойства display — inline-block. Применим его к нашим блокам, а для того, чтобы это корректно сработало в IE6, заменим блоки на инлайновые span.

<span>
    <h3>Прости мне, милый друг</h3>
    Двухлетнее молчанье: Писать тебе посланье мне было недосуг. На тройке пренесенный из ...
</span>
<span>
    <h3>От утра до утра</h3>
    Два года всё кружился без дела в хлопотах зевая, веселился...
</span>
<span>
    <h3>В театре, на пирах</h3>>
    Не ведал я покоя, увы! ни на часок, как будто у налоя в великой четверток измученный дьячок ...
</span>
<span>
    <h3>Заботы и печали</h3>
    Которые играли, стыжусь, столь долго мной; и в тишине святой философом ленивым ...
</span>
<span>
    <h3>С диваном, с камельком</h3>
    Три комнатки простые - в них злата, бронзы нет, и ткани выписные не кроют их паркет...
</span>
<span>
    <h3>Где мне в часы полдневны</h3>
    Березок своды темны прохладну сень дают; где ландыш белоснежный сплелся ...
</span>

span {width: 33%; float: left;
display: inline-block;}

Можно заметить, что внутри блоков, например, как у нас, могут находится блочные элементы, а помещать блочный элемент внутри инлайнового, так сказать, некошерно. Но меня это не интересует, т.к. я всегда могу для корректности употреблять только инлайновые элементы, а с помощью CSS задавать им нужный display. А сейчас просто не заморачиваюсь. И вам тоже советую не заморачиваться:-))

Теперь можно увидеть, что блоки выстроены по строкам, но при этом хромает вертикальное выравнивание:

Шаг последний

Выставляем нашим блокам вертикальное выравнивание:

span {width: 33%; float: left;
display: inline-block; vertical-align:top;}

Это даст нам то, что требуется:



Работающий пример можно посмотреть здесь.

Всех с праздником!