Есть ли способ оправдать выравнивание плавающих элементов HTML с помощью CSS?

По существу, я пытаюсь добиться эффекта "text-align: justify", но с элементами плавающего блока. У меня есть много блоков, которые я хочу выровнять по выравниванию.

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

Есть ли способ сделать это с помощью CSS? Если нет, есть ли подходящая библиотека JS для этого? Или это просто неосуществимо?

ОТВЕТЫ

Ответ 1

Если элементы на самом деле не float ing, вы можете использовать position:absolute; left:1em; right:1em, чтобы CSS вычислил ширину элементов для вас на основе смещений от некоторого позиционированного родителя.

Если вы используете только float, потому что у вас есть некоторые элементы уровня блока, которые вы пытаетесь сделать, используйте display:inline-block для элементов вместо их плавания. Если родительский элемент имеет text-align:justify, это должно дать вам эффект (я думаю, это), который вы хотите.

Вот простой тест, показывающий результат inline-block с text-align:justify.

Изменить. Я обновил простой тест, чтобы более четко показать, что левый и правый края всегда выровнены, за исключением последней строки.

Ответ 2

Завершение предыдущего ответа, если вы хотите выровнять узлы DOM, созданные программно (например, с помощью document.createElement и parentElement.appendChild в javaScript), между выравниваемыми элементами не будет добавлено пустое пространство. Это может привести к неработоспособности aligment.

В моих браузерах Google Chrome 56.0.2924.87 и Firefox 51.0.1 (64-разрядные), aligment не работает, если нет никаких пробелов для разделения элементов div:

https://jsfiddle.net/jc5qwyaw/

Есть пример, когда я создаю узлы DOM с помощью javaScript:

https://jsfiddle.net/oa8yeudr/

Если вы раскомментируете команду wrapDiv.appendChild(document.createTextNode(" "));, вы можете увидеть разницу. Возможным решением может быть добавление текста пробела node после узлов div, как показано выше.

Проверено только на Chrome 56.0.2924.87 и в Firefox 51.0.1 (64-разрядная версия).