Довольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который JS-ом скрывает или показывает элементы списка, при этом он не должен разрушать «строки», верстку, или образовывать дыры, поэтому решения на таблицах не катят сразу. Простейший пример — каталог товаров:
Решили вместе с morfi сделать более-менее универсальное решение, которое бы позволило без лишних проблем публиковать такого рода контент. Важный момент — что высота блоков может зависить, к примеру, от высоты заголовка, или от описания, если бы оно было в макете.
Тут есть два подводных камня. Первый — зазоры между блоками. Если просто поставить float:left;margin-right|bottom:50px (я упростил синтаксис), то у последнего элемента в «строке» всегда будет отступ, поэтому он никогда не будет четко на границе контейнера.
Решение с float, лежащее на поверхности:
- Элементам задаем
float:left; margin-top|left:50px - Заворачиваем элементы в ещё один контейнер и ему задаем
margin-top|left:-50px— отрицательный отступ, и пусть теперь внешний контейнер (изначальный) будет называться wrapper, а внутренний — container. - Контейнеру и врапперу для дружбы с IE нужно присвоить
zoom:1и чтоб они не схлопнулись от float-элементов —overflow:hidden - Чисто для IE нужно указать
display:inlineдля блоков, иначе мы получим удвоенныйmargin
Все бы ничего, но в такой ситуации, если высота блоков может сильно отличаться, может возникнуть вот такой косяк:
Обратите внимание на блоки three, four и five. Зеленый блок — это враппер, синий — контейнер.
Логически ситуация понятна — блок должен тянуть линию (или «строку»), в которой он находится. Это поведение — типичное для display:inline-block.
Для того, чтобы применить это решение на практике нужно:
- Снова задаем
marginкак и в примере выше - Блокам раздаем универсальную кроссбраузерную конструкцию
display:-moz-inline-box; display:inline-block; *zoom:1; *display:inline - Замечаем, что горизонтальные расстояния оказались чуть больше нужных
50px— это из-запробелов, затесавшихся междуinline-block - Для борьбы с пробелами измеряем его ширину — получается
4px, а это 25% от1em, которыйпо-умолчанию равен16px. Таким образом контейнеру ставимword-spacing:-0.25em, а блокамword-spacing:normal - Для IE нужно также прописать блокам
text-align:top, иначе элементы будут выровнены по базовой линии.
Багов пока не замечено, решение кроссбраузерное. Inline-метод спокойно выдерживает простановкуtext-align:center у контейнера (см. скриншот). Надо только не забыть у блоков выставить обратноtext-align:left (см style.css — я их закоментировал там).
Работающий пример доступен по адресу: http://test.dis.dj/blocks/.
P. S. Решение не ново, но оно будет полезно в любом случае.
P. P. S. На скриншоте — будущий интернет-магазин-портал для мамочек.
