Равноудаленные div DOM со встроенными блоками и выравниванием текста не будут работать при вставке через JS

Я пытался реализовать встроенный блок Криса Койера + решение для выравнивания текста для автоматического распределения div по горизонтали в заданной ширине оболочки. http://css-tricks.com/equidistant-objects-with-css/

Это прекрасно работает, когда элементы сразу загружаются в DOM, но по какой-то причине происходит сбой при программном добавлении элементов через JS. Как будто браузер просто игнорирует свойства css.

Посмотрите эту скрипту для очень простого примера: http://jsfiddle.net/xmajox/NUJnZ/ Первые две строки добавляются при загрузке HTML. Нажмите кнопку, чтобы добавить больше во время выполнения через JS.

Первоначально я думал, что это может быть как-то связано с использованием псевдоэлемента :after, поэтому вместо этого я попробовал другую версию с узлом DOM: http://jsfiddle.net/xmajox/wnPSA/ К сожалению, он реагирует точно так же.

Кто-нибудь знает, почему это происходит? или еще лучше, как это исправить/предотвратить?


javascript css dom text-align
person Rodrigo Neves    schedule 10.10.2012    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Чтобы это работало, между элементами должен быть какой-то пробел, см. это: http://jsfiddle.net/NUJnZ/22/

Обратите внимание, что в третьей строке нет пробела между DIV. Когда jQuery добавляет новый элемент, нет начального или конечного пробела.

Просто добавьте завершающий пробел с помощью .before(' '), и элементы выстроятся правильно. (если вы используете .after(' '), возникает проблема с интервалом в последнем элементе)

Обновленная скрипта: http://jsfiddle.net/NUJnZ/24/

person Snuffleupagus    schedule 10.10.2012
comment
Вау, отличный улов, я и близко не был. Является ли это «нормальным» поведением для браузера? Я думал, что это вообще не имеет значения... - person Rodrigo Neves; 10.10.2012
comment
@xmajox Ну, я бы не назвал это ошибкой, это стандартно. Ознакомьтесь с этим. Я не совсем уверен, зачем нужен пробел, я предполагаю, что он просто объединяет его в один элемент и думает, что без него можно оправдать только одно. - person Snuffleupagus; 10.10.2012
comment
Конечно! Это связано с тем, как работает выравнивание текста... text-align: justify равномерно распределяет «слова» на основе пробелов: никаких пробелов, для него это все одно слово. Спасибо за помощь! - person Rodrigo Neves; 10.10.2012
comment
Битва продолжается... загляните на stackoverflow.com/q/12834369/1735214, если у вас есть несколько минут;) - person Rodrigo Neves; 11.10.2012