Рубрика CSS
Как разместить элементы по горизонтали используя CSS
В этом уроке я хочу рассказать о горизонтальном размещении элементов в пределах основного контейнера, используя только CSS. Эта задача не особенно сложна и может быть решена, с помощью селектора CSS:first-child.
На рисунке ниже приведен пример горизонтального размещения:
Вот HTML код, который можно использовать для определения структуры документа:
<div></div>
<div></div>
<div></div>Для того, чтобы разместить горизонтально 3 элемента внутри контейнера мы воспользуемся несколькими строками кода CSS. На первый взгляд, решение может оказаться простым, нужно всего лишь определить класс (.section) со свойствами width и margin-right с заданными значениями и применить его к каждому <div> элементу, содержащемуся в контейнере. Но проблема заключается в правом отступе последнего элемента <div>, который выступает за ширину контейнера:
И в этом случае браузер отобразит страницу следующим образом:
Как вы видите последний элемент <div> переместился ниже. Вопрос: Как можно удалить внешний отступ последнего элемента без использования дополнительного класса CSS со свойством margin-right равным 0?
Решение
Как я уже сказал в начале этой статьи, самым простым решением является использование селектора CSS:first-child и инвертирование положения отступа справа налево.
Для начала определим контейнер, используя следующий код CSS:
#wrapper{
width:320px;
height:60px;
background:#EFEFEF;
}Далее определяем class.section, который будет применяться к каждому элементу в главном контейнере.
.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}В этом примере я использовал фиксированные значения свойства width и margin-left, но вы также можете использовать относительную величину (в процентах). Теперь нам нужно удалить отступ слева добавив следующий код:
#wrapper div:first-child{margin-left:0px;}Браузеры интерпретируют предыдущую строку следующим образом: к первому элементу <div>, содержащемуся внутри элемента с ID=wrapper, установят свойство margin-left со значением 0. В результате получиться следующее:
Есть одно замечание, которое состоит в следующем: IE 6 не поддерживает селектор :first-child. В этом случае вы можете использовать условные комментарии для определения специального файла CSS для IE6 с добавлением нового класса (например, .section-first) с теми же свойствами как у класса .section, но со значением margin-left равное 0.
