Горизонтально распределенный динамический контент

У меня есть div с плавной шириной, заполненный миниатюрами из запроса JSON, и я пытаюсь равномерно распределить эти миниатюры по ширине div. Эти эскизы должны быть разрешены для переноса и перекомпоновки, если изменяется ширина окружающего div, и они могут различаться по x- и y-размерам, а также по количеству загруженных эскизов.

Я обнаружил, что использование text-align: justify; и display: inline-block делает именно то, что мне нужно, со статическими элементами HTML, например так:
http://jsfiddle.net/skywalkar/gUcvq/

Однако, когда я делаю то же самое с контентом, полученным с помощью JavaScript, он возвращается к простому выравниванию по левому краю (если он вообще отображается — Chrome и Firefox отображают его с выравниванием по левому краю, но IE, похоже, отказывается отображать миниатюры вообще!):
http://jsfiddle.net/skywalkar/KdLyx/

Мой вопрос заключается в следующем:
Как я могу заставить миниатюры, загруженные с помощью JavaScript, быть выровнены по горизонтали, как HTML-версия?


person RobotZombieLord    schedule 06.03.2013    source источник


Ответы (1)


У вас тут 2 проблемы. Во-первых, ваш диапазон за пределами div (честно говоря, вам даже не нужен диапазон, просто используйте псевдоэлемент :after).

Во-вторых, выравнивание зависит от пробелов. Вы вставляете свои изображения без пробела/новой строки/и т.д. Вот поэтому и не оправдают.

http://jsfiddle.net/KdLyx/7/

person cimmanon    schedule 06.03.2013
comment
Не забудьте добавить content: '' к псевдоэлементу, чтобы он отображался. - person thgaskell; 07.03.2013
comment
Вау, это было намного проще, чем я ожидал! Благодаря тонну. - person RobotZombieLord; 07.03.2013