2013-03-06 2 views
1

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

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

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

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

ответ

2

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

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

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

+0

Не забудьте добавить 'содержание: «»' псевдо-элемента так, что он делает. – thgaskell

+0

Ничего себе, это было намного проще, чем я ожидал! Благодаря тонну. – Skywalkar

 Смежные вопросы

  • Нет связанных вопросов^_^