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

1. Определим для каждого элемента ширину в % и позиционируем по левому краю:

<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»>

CSS код:

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

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

2. Определим для каждого элемента (кроме первого) отступ слева:

<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%;
}

Тут нам даже не придется высчитывать отступы для каждого элемента – мы просто зададим общий равный отступ для трех элементов, начиная со второго. По идее все должно работать как надо, т.к. отступ будет отсчитывать от ширины окна браузера, так же как и ширина родительского элемента. также, блок do-not-wrap должен предотвратить разъезжание элементов. Но результат нас опять огорчит…

3. Обернем элементы табличной структурой

<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>

И даже этим способом мы не получим идеального результата – элементы будут равноудалены не всегда. Если задать для 2й и 3ей ячейке центрирование содержимого; крайней слева – по левому краю, и последней по правому краю, то в результате все должно работать как нужно, если… не изменять размеры окна браузера.

4. Что будем делать?

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

Равноудаленные элементы

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;
}

Что ж, смотрим итоги наших попыток реализации равноудаленных элементов. Очевидно, что именно 4й способ и станет идеальным решением.