CSS: Выравнивание DIV блоков

Выравнивания блоков в верстке

Многие разработчики сталкивались с проблемой выравнивания блоков в верстке.

Это стандартная практика, когда DIV блоки разной высоты и их необходимо расположить в строку и друг под другом, а они сползают один под другой.

Метод, отлично подходящий для строк с блоками:

<div>...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
...
 
 
.block { display: inline-block; vertical-align: top; width: 230px; margin-bottom: 25px; }
 
Разберем код, во первых float: left/right нельзя использовать, иначе будет как на скриншоте выше. Во вторых display: inline-block; создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. И в заключении vertical-align: top; выравнивает блок по верхней границе строки, т.к. по умолчанию выравнивание идет по нижней границе. Стоит заметить, что vertical-align, работает только для заданного блока, для дочерних элементов в блоке это значение присваивается.
 
Источник: http://yaponomat.com/jquery-js/css-viravnivanie-div-blokov/




Rambler's Top100
Rambler's Top100 Check Page Rank