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

Одной из самых частых задач в вёрстке страницы - равномерное расположение блоков div по горизонтали с возможностью переноса на следующую строку. Для этого блоки <div> нужно расположить в однин горизонтальный ряд. При этом, при масштабировании окна браузера они должны равномерно переноситься. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Как это сделать?

Располагаем n блоков div в горизонтальный ряд

Всё достаточно просто. Воспользуемся свойством float (выравнивание с обтеканием). Важно, чтобы минимальная ширина страницы/окна/родительского элемента позволяла вместить в себя как минимум два. Остальные блоки переносятся на следующую строку.

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

Бывает так, что одна строка может наехать на другую. Для этого отменим обтекание свойством clear. Зададим его для div, который будет размером по высоте в 1 пиксель и ширине 100%. При надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу.

Теперь к практике, примерам и исходникам...

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

Всем div мы присвоим параметр float:left. Для наглядности создадим 6 таких блоков:

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

   <!-- ------- установим стили блока DIV -------- -->
<style>
#line_block { 
        width:110px; 
        height:50px; 
        background:#f1f1f1; 
        float:left; 
        margin: 0 15px 15px 0; 
        text-align:center;
        padding: 10px;
        }
</style>
   <!-- ---------- вставим блоки на страницу --------- -->
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

<div id="line_block">DIV 1</div> 
<div id="line_block">DIV 2</div> 
<div id="line_block">DIV 3</div>
<div id="line_block">DIV 4</div>
<div id="line_block">DIV 5</div>
<div id="line_block">DIV 6</div>

<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

Смотрим пример работы и скачиваем исходники:

Демонстрация Скачать исходники

Рекомендую масштабировать страницу и посмотреть за поведением элементов.

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

Спасибо за внимание! Удачи в вёрстке!