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

Question

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

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

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

Answer 1

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

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

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

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

Answer 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(" "));, вы можете увидеть разницу.Возможным решением может быть добавление текстового узла с пробелами после узлов div, как показано в примере выше.

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