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




Как расположить несколько блоков div в ряд? Как запретить обтекание блоков <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 для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!!!