Плавающие блоки CSS с переменной высотой

Насколько мне известно, нет способа решить эту проблему с помощью чистого CSS (который работает во всех распространенных браузерах):

• Поплавки не работают.
• display: inline-block не работает.
• position: relative с position: absolute требует ручной настройки пикселей. Если вы используете серверный язык и работаете с изображениями (или чем-то с предсказуемой высотой), вы можете выполнять настройку пикселей «автоматически» с помощью серверного кода.

Вместо этого используйте jQuery Masonry.

при условии, что ваши потребности больше похожи на ваш цветной пример кода, тогда:

.box:nth-child(odd){
    clear:both;
}

если это будет 3 строки, тогда nth-child(3n+1)

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

(это важно - №1).

Плавающий элемент переместится как можно дальше влево или вправо в том положении, в котором он был изначально

Так что скажите это так:

У нас есть 2 див

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

без float они будут один под другим

Если мы float: right div5, div6 расположится на линии, где был div5,

/*the lines are just for illustrate*/

Итак, если теперь мы float: left div6, он переместится как можно дальше влево, «в этой строке» (см. №1 выше), поэтому, если div5 изменит свою строку, div6 последует за ней.

Теперь добавим еще один div в уравнение

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

У нас есть это

Если мы установим clear: right в div5, мы заставим его принять строку ниже div4

и div6 будет плавать в этой новой строке вправо или влево.

Теперь давайте используем в качестве примера вопрос, который привел меня сюда из-за повторяющегося принуждения стек слева направо

Вот фрагмент для проверки:

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:40px;
}

.three{
    background-color:orange;
    height:55px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>

На изображении выше вы можете увидеть, как div.5 хранится рядом с div.3, потому что в его строке (определяемой полем строки div.4), которая находится максимально далеко, div.1*, div.2* и т. Д. Также плавают слева от div.5, но поскольку они не помещаются в эту строку, они переходят к строке ниже (определяется рамкой строки div.5)

Теперь обратите внимание, что когда мы уменьшаем высоту div.2* настолько, чтобы она была меньше div.4*, как она передается до div.5*:

Надеюсь, это поможет прояснить, почему этого нельзя достичь с помощью поплавков. Я поясняю использование float (а не inline-block) только из-за заголовка «CSS Floating Divs At Variable Heights» и потому, что сейчас ответ довольно длинный.

Как было правильно указано, это невозможно только с помощью CSS ... к счастью, теперь я нашел решение в http://isotope.metafizzy.co/

Вроде решает проблему полностью.

С небольшой помощью этого комментария (CSS Block float left) я понял ответ.

В каждую создаваемую «строку» я добавляю имя класса left.
В каждую другую создаваемую «строку» я добавляю имя класса right.

Затем я плаваю влево и вправо для каждого из этих имен классов!

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

Спасибо за вашу помощь, ребята!

#holder{
  width:200px;
  border:1px dotted blue;
  display:inline-block;
}
.box{
  width:100px;
  height:150px;
  background-color:#CCC;
  float:left;
  text-align:center;
  font-size:45px;
}
.one{
  background-color:#0F0;
  height:200px;
}

.two{
  background-color:#0FF;
}

.three{
  background-color:#00F;
  float:right;
}

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}

<div id="holder">
  <div class="box one left">1</div>
  <div class="box two left">2</div>
  <div class="box four right">4</div>
  <div class="box three right">3</div>
</div>
</body>

Благодаря тридцати точкам я понял, что мой предыдущий ответ не решил проблему должным образом. Вот моя вторая попытка, которая использует JQuery как решение только для CSS, кажется невозможной:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>

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

Если кто-то все еще ищет альтернативы, вот одна. Попробуйте использовать свойство (-moz - / - webkit-) column-width. Он решает проблему с переменной высотой div. Однако ширина столбца добавляет новый div в конец столбца.

В противном случае лучше всего работает jQuery Masonry.

Возможно, это не точное решение для всех, но я считаю, что (в буквальном смысле) нестандартное мышление работает во многих случаях: вместо отображения полей слева направо во многих случаях вы можете сначала заполнить левый столбец, чем перейдите в середину, заполните ее полями и, наконец, заполните правый столбец полями. Тогда ваше изображение будет:

:

Если вы используете язык сценариев, такой как php, вы также можете заполнять столбцы слева направо, добавляя к нему новое поле и выводя данные, когда все столбцы заполнены. например (непроверенный код PHP):

$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;

$ col1, $ col2 и $ col3 могут иметь значения float: left и width: 33%, установите поля внутри div на полную ширину и не используйте float.

Очевидно, что если вы используете javascript / jquery для динамической загрузки ящиков, вам лучше стилизовать их таким образом, как описано в других ответах на этот поток.

для отображения просто поместите этот CSS в свой div, и тогда у вас будет желаемый макет. нет необходимости в плагине или JS.

 .Your_Outer {
    background-color: #FFF;
    border: 1px solid #aaaaaa;
    float: none;
    display:inline-block;
    vertical-align:top;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 152.5px;
    max-width: 152.5px;
}

вы можете редактировать код в соответствии с вашими требованиями :)

В современных браузерах вы можете просто:

display: inline-block;
vertical-align: top;