Выравнивае блочных элементов по ширине родителя
Нашел отличную статью, подробно рассматривающую проблему выравнивания блочных элементов по ширине родительского контейнера. До этого момента, я, как и все, для выравнивания использовал горизонтальные отступы. Как правило, использовалось свойство margin-left, значение которого обнулялось для первого элемента коллекции. Это позволяло прижать первый элемент к левому краю без дополнительной разметки, достаточно было использовать псевдокласс :first-child, который поддерживается всеми браузерами, в том числе IE, начиная с версии 7. Основной минус в том, что приходилось вымерять отступ вплоть до одного пикселя. Также, при добавлении нового элемента, значение отступа снова требовалось калибровать. В отдельных случаях, все это не является большой проблемой. Но если требуется выровнять по ширине, например, пункты горизонтального меню, то ситуация в значительной степени ухудшается. Верстка перестает быть гибкой, мягко говоря.
В упомянутой статье описывается метод, который реализует настоящее выравнивание блочных элементов. Блоки выравниваются так, как это происходит с текстом, под влиянием text-align: justify. Так как статья там поистине огромная, я просто выделю предложенное решение в виде шпаргалки для дальнейшего использования.
Если вам интересен сам процесс получения результата, настоятельно рекомендую внимательно прочесть статью. Автор действительно молодец, проделал хорошую работу.
И так, код реализации. Привожу его без лишних свойств. Исключение составляют только свойства width и height, но непосредственного отношения к решению они не имеют. Комментарии в коде авторские:
#container
{
width: 50%;
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Лекарство для IE6-7*/
text-justify: newspaper;
zoom:1;
/* Включаем в работу последнюю строку*/
text-align-last: justify;
}
#container:after
{
width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
#container > div
{
width: 100px;
height: 100px;
display: inline-block;
text-align: left;
border: 1px solid #000;
/* Востанавливаем у потомков, кроме последнего*/
line-height: normal;
font-size: 14px;
/* Без него в Opera будет отступ под элементами */
vertical-align: top;
/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}
Код html разметки:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Демо пример работы данного решения.
На основе статьи Равномерное выравнивание блоков по ширине.
Комментарии (2)
а объясните мне чайнику, как мне выровнять элементы горизонтального меню?.
знаний не хватает(т.е. совсем нет), а методом тыка не работает.
Мего респект вам! Помогли решить эту задачу.