it-swarm.com.ru

Как равномерно распределить множество элементов inline-block?

Можно ли равномерно распределить множество элементов в элементе div с изменяемой шириной.

Вот не рабочий пример . Если мы используем text-align: center; элементы будут центрированы, но margin: 0 auto; не работает. Я хочу сделать что-то вроде оправдания + центр:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

Контейнер будет изменяться пользователем. Одна картинка стоит 1000 слов: 

enter image description here

Ширина контейнера (красная коробка): 100%; Таким образом, пользователь может изменить его размер (окно браузера, JS, что угодно).
<-> представляют четные пробелы. Во втором ряду <-> больше, потому что там больше места. Я смог подделать это с:

text-align:center;
Word-spacing:3em;    // but any fixed value looses proportion
23
CoR

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

Короче говоря, вам просто нужно использовать 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 есть, но не :last-line), так что это конец этой идеи.

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

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

Отлично.

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

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

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

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

34
Spudley

Я работал над вашим примером, вы должны сделать комбинацию блочный/встроенный стиль, так как одни только оправдания работают только для встроенного (текст).

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

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

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

}
0
Ezequiel Gorbatik