Оригинал сообщения
Комментарии: [показать]

UPD: Есть новый способ! Читайте пункт 4.



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

[показать]



Наша задача будет в том, чтобы расположить 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. Что будем делать?

Метод, присланый пользователем hmelii (из комментариев):

Для равноудаленного расположения изображений:

CSS

<style type="text/css">

#movers-row{ text-align:justify}

#movers-row span{ display:inline-block; width:100%; }

</style>

HTML:

<div id="movers-row">

   <img src="http://css-tricks.com/examples/EquidistantObjects/images/shape-red.png" alt="" />

   <img src="http://css-tricks.com/examples/EquidistantObjects/images/shape-green.png" alt="" />

   <img src="http://css-tricks.com/examples/EquidistantObjects/images/shape-yellow.png" alt="" />

   <img src="http://css-tricks.com/examples/EquidistantObjects/images/shape-blue.png" alt="" />

   <span></span>

</div>

Способ работает для всех браузеров! Смотрите пример.

Для равноудаленного расположения блоков:

CSS:

.container {

  text-align: justify;

  text-justify:newspaper;

  width:100%

}

.box{

  display:-moz-inline-box; // для поддержки FF2

  display:inline-block;

  vertical-align:top;

  text-align:left;

  width:200px;

  height:200px;

  background:red;

}

.box p {padding:10px;}

/*IE6*/

* html .box{ display:inline; }



/*IE7*/*

+ html .box{ display:inline; }



.under{display:-moz-inline-box; display:inline-block; width:100%; }

HTML

div class="container">

<div class="box"><p>текст текст текст текст текст</p></div>

<div class="box"><p>текст текст текст текст текст</p></div>

<div class="box"><p>текст текст текст текст текст</p></div>

<div class="box"><p>текст текст текст текст текст</p></div>



</div>

<span class="under"></span>

Способ работает для всех браузеров! Смотрите пример.

Метод Криса Койера

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

[показать]

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й способ и станет идеальным решением.

Оригинал статьи: Chris Coyier

[показать]LIci WP - WordPress crossposting plugin