Разные высоты divs плавают в двух столбцах
У меня есть два столбца и вы хотите, чтобы стеки разделить высоту в порядке появления.
Динамически создаются divs.
Если я только плаваю их на 50% ширины, скоро я прихожу в ситуации, что div # 4 в 5 раз выше, чем входящие несколько div. Затем следующий div выравнивается по верхнему краю с нижней частью предыдущего div.
Мне нужно подогнать дочерние divs в контейнере, чтобы точно соответствовать следующим образом:
----- -------
1 2
-----
3 -------
----- 4
5
-----
6
-----
7 -------
----- 8
9
-----
10 -------
11
-------
-------
-----
Вот фрагмент кода, что я сделал:
<style>
.box {background:#20abff; color:#fff; width:50%; margin: 5px;}
.left {float:left;}
.right {float:right;}
.container {width:205px;}
</style>
<body>
<div class="container">
<div class="box left" style="height:60px;">1</div>
<div class="box left" style="height:80px;">2</div>
<div class="box left" style="height:30px;">3</div>
<div class="box left" style="height:70px;">4</div>
<div class="box left" style="height:60px;">5</div>
<div class="box left" style="height:20px;">6</div>
<div class="box left" style="height:40px;">7</div>
<div class="box left" style="height:90px;">8</div>
<div class="box left" style="height:30px;">9</div>
</div>
</body>
и он похож на этот
http://dl.dropbox.com/u/142343/divstack.html
оцените помощь
Ответы
Ответ 1
Вам нужно будет сделать это с помощью JavaScript. Если вы используете jQuery, есть отличный плагин под названием Masonry. Существует также версия без jQuery.
Чтобы процитировать README на GitHub:
Масонство - это динамическая схема сетки script. Подумайте об этом как о флип-стороне поплавков CSS. В то время как плавающие элементы располагаются горизонтально, тогда вертикально, масонство устраивает элементы по вертикали, позиционируя каждый элемент в следующем открытом месте в сетке. Результат сводит к минимуму вертикальные промежутки между элементами разной высоты, как и каменщик монтаж камней в стене.
макет одного столбца - это, вероятно, то, что вы ищете.
Если вы не возражаете оставить старые браузеры в пыли, есть CSS3 column
свойства. Здесь приведен пример здесь, на Quirksmode и некоторая документация на MDN.
Ответ 2
Используйте 2 div в качестве контейнера, поместите оба столбца в этот контейнер div, поэтому дайте этому div float влево и вправо.... он может работать...
Также будет работать макет сетки.