Разные высоты 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 влево и вправо.... он может работать... Также будет работать макет сетки.