Просмотров: 1 656

Техника верстки в несколько колонок с помощью свойства CSS float.

На свойстве float основываются ряд техник верстки веб-страниц в несколько колонок. Давайте рассмотрим, как и на каком принципе это работает.

Чтобы понять, как это работает, как всегда рассмотрим небольшой пример.

<div style="background:#ccc; width:150px; height:300px; float:left;">
   Левая колонка
</div>
<div style="background:#c9c; width:150px; height:300px;  float:left;">
   Правая колонка колонка
</div>

Мы получили 2 колонки, которые располагаются одна возле другой. Произошло это все благодаря еще одной характеристики свойства float. Когда два блока с однотипным значением свойства flot располагаются рядом друг с другом, они выстраиваются в колонки.

Точно также можно сделать 3 и более колонок.

<div style="background:#ccc; width:150px; height:300px; float:left;">
   Левая колонка
</div>
<div style="background:#c9c; width:150px; height:300px;  float:left;">
   Правая колонка
</div>
<div style="background:#9cc; width:150px; height:300px;  float:left;">
   Еще одна колонка
</div>

Колонки будут располагаться рядом друг с другом до тех пор, пока хватает места по ширине родительского блока, в котором они располагаются. Такое поведение очень похоже на поведение строчных элементов.

<div style="background:#ccc; width:150px; height:300px; float:left;">
   Левая колонка
</div>
<div style="background:#c9c; width:150px; height:300px;  float:left;">
   Правая колонка
</div>
<div style="background:#9cc; width:150px; height:300px;  float:left;">
   Еще одна колонка
</div>
<div style="background:#99c; width:150px; height:300px;  float:left;">
   Еще одна колонка
</div>
<div style="background:#999; width:150px; height:300px;  float:left;">
   Еще одна колонка
</div>

Таким образом, свойство float является одним из способов, как вы можете располагать элементы на ваших веб-страницах в несколько колонок и довольно часто используется на практике.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».