Авторизация

Выравнивание блоков с помощью css {display: inline-block}

В интернете уже есть подобные статьи, вот и я решил для себя сделать пометку.

Обычно такой способ выравнивания блочных элементов нужен когда есть необходимость выровнять категории товаров в контенте с заранее неизвестной высотой либо по центру либо по левую сторону.
Ниже CSS код для выравнивания блоков CSS с заранее неизвестной высотой:

 div {
	width: 200px;
	border: 1px solid #000;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align:top;
	margin: 5px;
	zoom: 1;
	*display: inline;
	_height: 250px;
}

Тут пример.

У данного способа выравнивания блоков в контенте есть как достоинства, так и недостатки.
Одним из ощутимых недостатков является присутствие пробела между блоками, который лечится "склеиванием" всех блоков в коде или можно в css прописать для родителя font-size:0% для этих пробелов.
Из достоинств можно отметить растягивание по высоте и корректное отображение во всех браузерах.

Но даже с учётом этих недостатков этот способ остаётся самым лучшим!

Для более детального ознакомления читаем статью на хабре.

[ Saitadmin.ru || с 2006 по текущий год || Санкт-Петербург ]