Есть ли способ оправдать выравнивание плавающих элементов 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-разрядная версия).
