Создание горизонтальной строчки объектов, равноудаленных друг от друга, это одна из нелегких задач в веб дизайне, хотя казалось бы что в этом сложного. Такое расположение элементов может стать очень полезным, особенно в макет с плавающей шириной, когда необходимо равномерно заполнить элементами все горизонтальное пространство. Вот задачи которые нам необходимо решить:

• самый левый объект выровнен по левому краю так же как его родительский элемент.
• самый правый объект выровнен по правому краю так же как его родительский элемент.
• каждый объект равноудален от соседних.
• объекты не должны перекрывать друг друга, когда уменьшается размер окна браузера.
• объекты не должны переноститься, на новую строку когда уменьшается размер окна браузера.
• техника должна работать в условиях плавающей ширины. даже если отцентрировано.

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

Провал: задать каждому объекту процентное положение слева

Для начала я присвоил каждому изображению отдельный класс:

<img src="images/shape-red.png" class="first-r">
<img src="images/shape-green.png" class="second-r"> 
<img src="images/shape-yellow.png" class="third-r"> 
<img src="images/shape-blue.png" class="fourth-r">

Затем я задал процентную позицию от левоо края для кадого из классов:

img.first-r { left: 0%; position: relative; }  
img.second-r { left: 25%; position: relative; }  
img.third-r { left: 50%; position: relative; }  
img.third-r { left: 75%; position: relative; }

Обратите внимание на относительное(relative) позиционирование. Оно необходимо для того, чтобы самое левое изображение соответствовало родительскому элементу, при условии, что контент отцентрирован, а не выровнен по левому краю. Проблема здесь в том, что отступ слева примененный к самому крайнему изображению составляет 75% от ширины окна браузера, но точка начала отсчета левый край родительского элемента, а не левая граница окна браузера. Из-за этого крайний правый элемент может сместиться за границы экрана (не быть выровненным относительно правой границы родительского элемента). Так же, в конечном счете по неизвестной причине этот элемент будет переноситься на новую строку, при недостаточных размерах окна браузера.

Если в этом примере вы поставите абсолютное позиционирование (absolute position), вы избавитесь от некоторых недостатков перечисленных выше, ваш объект будет выровнен по левому краю, полностью игнорирую позиционирование родительского элемента. Плюс, при сильно свернутом окне браузера, изображения будут перекрываться, но по крайней мере объекты все же равнудалены друг от друга!

Провал: задать всем объектам общий отступ слева в процентах

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

<span class="do-not-wrap">
<img src="images/shape-red.png">
<img src="images/shape-green.png" class="mover">
<img src="images/shape-yellow.png" class="mover">
<img src="images/shape-blue.png" class="mover">
</span>

Добавляем отступ:

img.mover {  	margin-left: 15%;  }

Посмотрев на этот пример с процентным отступом вы можете понять что такой способ обречен. Я просто подобрал процентные отступы для лучшего отображения, здесь нет никаких математических расчетов, все от того что родитльский элемент имеет размер в процентах от размера окна браузера, и отступ в процентах отсчитывается не от родитеьского элемента, а от окна браузера. Также обратите внимание на “перенос” элемента span, который необходимо предотвратить… Но по крайней мере объекты всеже равноудалены друг от друга!

Провал: Используем таблицы!

Даже “шаманство” на CSS похоже не работает. Я думаю этот способ сработает, таблицы иногда очень полезны, а иногда приводят в бешенство своим автоматическим отступом в ячейках.

<table>
  	<tr> 
 		<td class="leftalign"><img src="images/shape-red.png"></td>  
		<td><img src="images/shape-green.png"></td> 
 		<td><img src="images/shape-yellow.png"></td>
  	<td class="rightalign"><img src="images/shape-blue.png"></td> 
 	    </tr>
</table>

Обратите внимание на дополнительный класс выравнивания (align) в первой и последней ячейках. Если все ячейки будут отцентрированы, это позволит расположить элементы равноудаленно друг от друга, но тогда ни крайний левый, ни крайний правый объекты не будут выровнены по краям родительского элемента. Такая проблема решается добавлением выравнивания по левому краю для левого элемента и соответственно по правому краю для правого — но тогда объекты уже не равноудалены друг от друга.

Успех: Первый по левому краю, остальные в плавающих блоках одинакового размера

К счастью способ с таблицей натолкнул меня на одну идею. Первое изображение должно иметь выравнивание по левому краю, но ведь все остальные могут быть выровнены по правому. Фактически, если сделать так, и поместить все изображения в блоки одинакового размера, занимающие все пространство то это должно сработать. Думаю наглядный пример опишет идею лучше:

HTML:

<img src="images/shape-red.png"> 
<div id="movers-row"> 
 	<div><img src="images/shape-green.png"></div> 
 	<div><img src="images/shape-yellow.png"></div>  
	<div><img src="images/shape-blue.png"></div>  
</div>

CSS:

#movers-row 
{  	
margin: -120px 0 0 120px; 
}  
#movers-row div 
{  	
width: 33.3%;  	
float: left;  
}  
#movers-row div img
{  	
float: right; 
}

Думаю у кого-то может быть и есть более удачное решение, так что если оно у вас есть дайте мне знать!