CSS / JS: равномерное распределение элементов по нескольким строкам

Question

Как бы вы поступили с равномерным распределением элементов по нескольким строкам, например:

---

wrapper div: <div style="text-align: center">
elements inside: <div style="display: inline-block;
                 padding-left: 10px; padding-right: 10px;">Element</div>

Вместо того, чтобы иметь только один элемент на следующей строке (в переносе):

Element 1        Element 2        Element 3        Element 4        Element 5
                          Element 6

Это делает это, распространяя элементы:

Element 1        Element 2        Element 3
Element 4        Element 5        Element 6

Answer 1

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

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

Я бы предложил заранее выбрать количество столбцов (2 или 3) затем с использованием элементов с шириной, установленной в 50% или 33% и свойством text-align в center.

Answer 2

Переместите их все влево, ширина до 50% или 33% или что вам нужно.

После этого обязательно очистите поплавок.

Answer 3

Как насчет указания стиля "ширина"?

<div style="width: 50px; display: inline-block; padding-left: 10px; padding-right: 10px;">Element</div>