Выравнивания блоков в верстке
Многие разработчики сталкивались с проблемой выравнивания блоков в верстке.
Это стандартная практика, когда 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/
