Как равномерно распределить многие элементы встроенного блока?

Ответ 1

Недавно я прочитал о очень умной технике, чтобы делать именно то, что вы просите.

Короче говоря, вам просто нужно использовать text-align:justify; в элементе контейнера для этого, в сочетании с дополнительным невидимым блоком в конце.

Это работает, потому что элементы inline-block рассматриваются как часть текстового контента, каждый из которых эффективно представляет собой одно слово.

Использование justify будет распространять слова в вашем тексте, чтобы они заполнили всю ширину элемента дополнительным пространством между словами. Для элементов inline-block это означает, что они разнесены с четными промежутками между ними.

Я упомянул о дополнительном невидимом блоке в конце. Это необходимо, потому что обычный text-align:justify не будет оправдывать последнюю строку текста. Для обычного текста, что именно вы хотите, но для выравнивания блоков inline-block, вы хотите, чтобы все они были выровнены.

Решение состоит в том, чтобы добавить дополнительный невидимый, но 100% -ный элемент ширины в конец вашего списка элементов inline-block. Это станет эффективной последней строкой текста, и, таким образом, метод justify будет работать для остальных ваших блоков.

Вы можете использовать псевдо-селектор :after для создания невидимого элемента без необходимости изменения вашей разметки.

Здесь приведена обновленная версия вашего jsFiddle для демонстрации: http://jsfiddle.net/ULQwf/298/

И здесь оригинальная статья, которая объясняет это более подробно: http://www.barrelny.com/blog/text-align-justify-and-rwd/

[EDIT] Последнее обновление после просмотра изображения, которое вы добавили в вопрос. (У меня нет лучшего ответа, но некоторые дополнительные мысли, которые могут быть полезны).

В идеале вам нужен селектор :last-line. Тогда вы можете text-align:justify основного текста и text-align:center последней строки. Это будет делать то, что вы хотите.

К сожалению, :last-line не является допустимым селектором (:first-line is, но не :last-line), так что конец этой идеи.

Несколько более обнадеживающая мысль text-align-last, которая существует как функция. Это может сделать именно то, что вы хотите:

text-align:justify;
text-align-last:center;

Perfect.

За исключением того, что он нестандартен и имеет очень ограниченную поддержку браузера.

Вы можете прочитать здесь о MDN.

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

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

Ответ 2

Я работал над вашим примером, вам нужно сделать комбинацию стиля block/inline, поскольку только justify just работает для inline (text).

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}

Ответ 3

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

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}