Как плавать div с переменной высотой на одинаковом расстоянии: решение без масонства?

Как расположить плавающие элементы div с фиксированной шириной, но переменной высотой на одном вертикальном расстоянии друг от друга?

Подобные вопросы, подобные этому, задавали много, и почти всегда ответом является использование каменной кладки: http://masonry.desandro.com/

Кирпичная кладка — хорошее решение, но каменная кладка делает больше, чем нужно.

Каким может быть простое решение jquery/css, не требующее библиотеки, такой как masonry или packery (http://packery.metafizzy.co/)?

Проблема:

1

Предполагаемый результат:

2

Изображения взяты из этих вопросов: Плавающие элементы div с переменной высотой

Связанные вопросы:

CSS-плавающие элементы Div на переменной высоте

Плавающие элементы div с переменной высотой

Пример HTML:

<style>
    #wrapper {
        width: 400px;
        overflow: hidden;   
    }

    .block {
        width: 180px;
        float: left;
        background-color: green;
        margin: 5px;

    }
</style>

<div id="wrapper">
    <div class="block" style="height:100px;">
    </div>
    <div class="block" style="height:200px;">
    </div>
    <div class="block" style="height:140px;">
    </div>
    <div class="block" style="height:70px;">
    </div>
    <div class="block" style="height:120px;">
    </div>
    <div class="block" style="height:170px;">
    </div>
</div>

javascript jquery css floating css-float
person coder    schedule 04.02.2015    source источник
comment
Я думаю, если вы не захотите немного ограничить границы своего вопроса, ваш ответ будет таким же, как и на уже заданные вопросы, которые в основном дублируются.   -  person Evan Knowles    schedule 04.02.2015

Ответы (4)


arrow_upward
1
arrow_downward

Для современных браузеров, поддерживающих столбцы CSS, вы можете использовать эту технику, опубликованную Раду Челариу на Sick Designer.

Вы можете настроить элемент #wrapper так, чтобы он имел 3 столбца, например:

#wrapper {
    -moz-column-count: 3;
    -moz-column-gap: 5px;
    -webkit-column-count: 3;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 400px;
}

#wrapper div.block {
    display: inline-block;
    /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%;
}
person Cafe Coder    schedule 04.02.2015
comment
Это сработает, если забыть о порядке элементов. - person c-smile; 04.02.2015
comment
@c-smile Хороший вопрос. Порядок дочерних элементов будет отличаться от реализации каменной кладки. - person Cafe Coder; 04.02.2015

arrow_upward
1
arrow_downward

Без js есть один способ CSS3, который вы можете реализовать, используя столбцы CSS3, такие как column-count, column-gap.

Перейдите по ссылке http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

person Muthu Kumaran    schedule 04.02.2015
comment
Спасибо, но JS или jquery не проблема, я искал что-то поменьше 25кб кладки. Отличное простое решение, хотя поддержка браузера и порядок содержимого могут вызвать некоторые проблемы. - person coder; 04.02.2015
comment
для плагина jquery попробуйте этот файл меньшего размера inwebson.com/jquery/ - person Muthu Kumaran; 04.02.2015
comment
Это действительно небольшой плагин. Отличный ответ! - person coder; 04.02.2015

arrow_upward
0
arrow_downward

Попробуйте использовать «inline-block» и «vertical-align» для div.

.block {
    display: inline-block;
    vertical-align: top;
    width: 180px;
    background-color: green;
    margin: 5px;
}

http://jsfiddle.net/g4vm5cpu/

Ваш блок будет вести себя как встроенные элементы

person mashi    schedule 04.02.2015
comment
Проблема с пространством та же, что и с плавающими блоками. - person coder; 04.02.2015
comment
Да, но блоки выстраиваются строгими линиями. Если вы не будете фиксировать вертикальное пространство между блоками, я думаю, что лучший способ - использовать решение столбца. - person mashi; 04.02.2015

arrow_upward
0
arrow_downward

В Sciter это можно сделать следующим образом:

<html>
  <head>
    <title></title>
    <style>

    #wrapper {
        width: 400px;
        flow: "1 2 3"   
              "1 4 3";
    }

    .block {
        width: 180px;
        background-color: gold;
        margin: 5px;
    }    

    </style>

  </head>
<body>

  <div id="wrapper">
    <span class="block" style="height:160px;">1</span>
    <span class="block" style="height:100px;">2</span>
    <span class="block" style="height:240px;">3</span>
    <span class="block" style="height:200px;">4</span>
  </div>

</body>
</html>

поскольку он поддерживает flow:"template" среди других менеджеров компоновки.

Это выше отображается как введите описание изображения здесь

В обычных браузерах без поддержки сетки модулей это невозможно без JS.

person c-smile    schedule 04.02.2015