Выравнивае блочных элементов по ширине родителя

Нашел отличную статью, подробно рассматривающую проблему выравнивания блочных элементов по ширине родительского контейнера. До этого момента, я, как и все, для выравнивания использовал горизонтальные отступы. Как правило, использовалось свойство 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>

Демо пример работы данного решения.

На основе статьи Равномерное выравнивание блоков по ширине.

Комментарии (3)

  1. а объясните мне чайнику, как мне выровнять элементы горизонтального меню?.
    знаний не хватает(т.е. совсем нет), а методом тыка не работает.

  2. Вячеслав

    Мего респект вам! Помогли решить эту задачу.

  3. На днях узнал о сервисе BAILRY — бесплатная регулярная (периодическая) проверка сайта на доступность. Возможно, кому-нибудь он пригодится! Есть там и платная подписка — для постоянного контроля доступности сайта. Удачи всем!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *