Как расположить элементы по горизонтали, используя css

В этом посте я хочу показать, как можно расположить по горизонтали определенное число элементов внутри контейнера родителя, используя css. Решение заключается в использовании псевдокласса CSS :first-child.

На изображение ниже вы можете увидеть расположенные по горизонтали элементы:

Этот HTML код вы можете использовать, чтобы определить структуру вашего документа:

HTML

<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

 

Чтобы расположить три элементы по горизонтали, внутри охватывающего (wrapper) блока, необходимо несколько строчек кода. На первый взгляд, решение могло бы состоять в том, чтобы определить класс (.section), ширину (width) и margin-right (правое поле), с определенными параметрами, и назначить их каждому блоку div внутри охватывающего блока. Проблема в том, что правое поле крайнего блока (div) выйдет за пределы охватывающего блока.

Проблема в том, что браузеры отобразят страницу следующим образом:

Последний блок div расположился под другими блоками. Вопрос: как удалить выступающее правое поле (margin-right) последнего элемента без использования различных css классов с объявлением margin-right:0;.




Решение

Как я уже говорил в начале статьи, решением будет использовать псевдокласс :first-child и создать промежутки между элементами, используя левой поле (margin-left). Селектор :first-child позволяет явно указать на первый прямой потомок элемента родителя. Как вы догадались, это поможет нам легко удалить левой поле.

Назначьте охватывающий блок, используя следующий css код:

CSS

#wrapper{
    width:320px;
    height:60px;
    background:#EFEFEF;
}

 

Назначьте стили для каждого блока внутри основного.

CSS

.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}

 

Для примера, я использовал фиксированные значения ширины (width) и правого поля (margin-right), однако, вы можете использовать относительные значения. Удалите левое поле, добавив следующий css код:

CSS

#wrapper div:first-child {margin-left:0px;}

 

Браузеры интерпретируют предыдущую строчку так: первому div элементу, заключенному в элемент с id=wrapper, установить margin-left 0. И как результат:

Примечание. IE6 не поддерживает псевдокласс :first-child. Вы можете использовать условные комментарии, чтобы определить специфичный CSS файл для IE6 и добавить новый класс (например .section-first) с теми же свойствами, что и у класса .section, но свойству .margin-left установите значение 0.
Источник