Динамически генерируемые «плавающие элементы» с равномерной шириной, но не высотой, выровняйте проблему

0

Я буду очень благодарен, если кто-нибудь поведет, как это решить:

Описание проблемы: у нас есть Dynamically сгенерированные "плавающие divs" с даже witdh, но даже не с высотами (на основе контента). "Родительский контейнер" будет иметь разные параметры ширины, чтобы позволить 2,3,4 (в прикрепленных примерах 2 столбца и 3) divs соответствовать его ширине. divs порядок слева направо, всегда с помощью hirarchical order 1,2,3 и т.д.

Как мы можем достичь этого, не создавая пробелов? (используется методом традиционных поплавков).

Количество divs динамически создано и не ограничено...

Решение должно быть ie8, ie9 compatible

спасибо, Джонатан. ! [введите описание изображения здесь] [1]

Пример иллюстрации можно найти здесь: https://app.box.com/s/6y89dlan1jt8bpjvcgb9

Теги:
responsive-design
floating

2 ответа

0

Чистое решение для CSS - Cross Browser (IE6+)

Вместо плавающего используйте макет столбца.

Этот рабочий скрипт демонстрирует раскладку из трех столбцов, но вы можете легко изменить ее на столбец N.

Для макета N колонок вам необходимо создать N контейнеров, каждая из 100/N ширины, и заполнить их соответственно.

Вам просто нужно построить свой динамический контент в правильном порядке. (каждый раз поместить динамический div в правый столбец).

Здесь основной HTML и CSS для 3-х столбчатых макетов

<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>

.Container {
    float: left;
    width: 31.33%;
    margin: 1%;
}

Скрипт в скрипке предназначен исключительно для добавления динамического содержимого. и хотя содержание, которое у меня было фиксированной высоты, оно, очевидно, будет работать и с изменяющимися высотами.

BTW: для раскладки в 2 столбцах вам это не нужно. просто сделайте нечетный элемент поплавок влево, а четные элементы плавают вправо. Как это

0

Вы считали, что используете что-то вроде масонства?

  • 0
    Большое спасибо, я рассматриваю это ... :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню