Как получить разницу высоты html divs для всплытия

У меня есть серия динамически созданных divs разной высоты в контейнере div.

<div id="container">
  <div id='d1'>Varying text...</div>
  <div id='d2'>Varying text...</div>
  <div id='d3'>Varying text...</div>
  <div id='d4'>Varying text...</div>
  <div id='d5'>Varying text...</div>
  <div id='d6'>Varying text...</div>
  <div id='d7'>Varying text...</div>
</div>

flow.jpg

Когда я "float: left", divs wrap, как и ожидалось, оставляет пустое пространство между более короткими div и следующей строкой div.

flow2.jpg

Как я могу заставить divs эффективно "float: up", обертывание верити, а не горизонтально. Использование только css.

В идеале пункт 2 относится к пункту 1, но любое улучшение поможет.

Итак, это будет выглядеть так:

enter image description here

ОТВЕТЫ

Ответ 1

Попробуйте использовать jQuery масонство. Это может быть большим решением для этого.

http://masonry.desandro.com/

Или попробуйте изотоп, который имеет гораздо лучшую производительность

http://isotope.metafizzy.co/

Ответ 2

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

css

// let reset our elements
.site-container,
.element-container,
.my-element {
    margin: 0;
    padding: 0;
}
.site-container {
    display: block;
    width: 960px;
    margin: 0 auto; /* centers your site container on the page */
    clear: both; /* basic float clearing */
}
.element-container {
    display: inline-block;
    float: left;
    width: 300px; /* we'll have 3 sections width 10px spacing */
    margin-right: 10px;
}
.element-container.last {
    margin-right: 0;
}
.my-element {
    width: 280px; /* 300 - 20px [total padding] = 280px */
    margin-bottom: 10px; /* add a bottom margin */
    padding: 10px; /* makes our element 320px wide */
}

// make background-color classes
.bg-red {
    background-color: #ff0000;
}
.bg-blue {
    background-color: #3b8acd;
}

разметка

<html>
<head>
<title>Vertical boxes!</title>
</head>
<body>
    <div class="site-container">

        <div class="element-container">
            <div class="my-element bg-red">
                1
            </div>

            <div class="my-element bg-blue">
                2
            </div>
        </div><!-- /element-container -->

        <div class="element-container">
            <div class="my-element bg-blue">
                3
            </div>

            <div class="my-element bg-red">
                4
            </div>
        </div><!-- /element-container -->

        <div class="element-container last">
            <div class="my-element bg-red">
                5
            </div>

            <div class="my-element bg-blue">
                6
            </div>
        </div><!-- /element-container -->

    </div><!-- /site-container -->    
</body>
</html>

Что касается седьмого div у вас есть, я бы предложил, чтобы он охватывал весь сайт-контейнер. Это эстетично:)

Ответ 3

Вы должны попробовать разместить каждый столбец div в свой собственный контейнер и поместить их влево. Например:

<div id='container'>
    <div id='col1'>
        <div id='d1'>asdf</div>
        <div id='d2'>asdf</div>
    </div>
    <div id='col2'>
        <div id='d3'>asdf</div>
        <div id='d4'>asdf</div>
    </div>
</div>

и т.д. и т.д.

каждый столбец плавает слева друг против друга, и каждый элемент столбцов течет вертикально достаточно хорошо... вот пример: http://jsfiddle.net/V6z8F/

Ответ 4

Недавно я сделал это для своего проекта.

Добавьте CSS для родительского класса:

-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;

Пример:

<div class="parent">
  <div class="child"></div> 
</div>