Как расположить несколько блоков div в ряд?


Очень часто приходится расположить несколько блоков <div> в однин ряд в горизонтальной плоскости. Например один блок <div> слева, а другой справа и чтобы они были в одном потоке чтения браузером. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Или при создании горизонтального меню, нужно пункты расположить в ряд. Одним словом - нужно позиционировать блоки <div>.

расположить несколько блоков div в ряд

Делается это очень просто, при помощи параметра float:...;, которым будем задавать обтекание блока справа, или слева, кому что нужно. Один важный момент - при таком позиционировании нескольких блоков <div>, нужно чтобы общая ширина страницы была больше суммы ширины блоков, иначе блоки будут один под другим, хотя и с разных сторон окна!!!

Как запретить обтекание блоков <div>


При позиционировании блоков, часто случается так, если разрешено обтекание, то текст может подскакивать вверх, или между блоками смещаться. Решается такая проблема созданием блока с запретом обтекания со всех сторон. Такой div нужно сделать размером по высоте в 1 пиксель и ширине 100%.

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

Пример горизонтального расположения нескольких блоков <div>


Для такого расположения блоков - всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:


DIV - 1
DIV - 2
DIV- 3
DIV - 4
DIV - 5
DIV - 6

Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:...; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!!!

по материалам сайта kapon.com.ua 19 03 2012

Поделитесь ссылкой на статью...


Всего комментариев - 1.    Можете оставить свой комментарий.

Дмитрий   2013-08-21 21:31:56   сайт автора -

Спасибо, действительно просто и ясно!


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер