CSS плавающие дивы на переменной высоте [дубликат]

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

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

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

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

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

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

так это образом:

у нас есть 2 div

<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 the div5 на div6 находится на линии, где div5 было ,

/*the lines are just for illustrate*/

так что если сейчас мы float: left the 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 слева направо

вот фрагмент, чтобы проверить его:

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*:

я надеюсь, что это помогает разъяснить, почему это не может быть достигнуто с помощью поплавков. Я только уточняю, используя поплавки (не встроенный блок) из-за названия "CSS плавающие дивы на переменной высоте" и потому что сейчас ответ вполне длинный.

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

Это, кажется, решить проблему полностью.

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

на каждой "строке", которую я делаю, я добавляю имя класса 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>

благодаря thirtydot, я понял, что мой предыдущий ответ не правильно решить эту проблему. Вот моя вторая попытка, которая использует 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 -). Он заботится о проблеме переменной высоты div. Однако ширина столбца добавляет новый div В конце столбца.

еще, кладка jQuery работает лучше всего.

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

:

Если вы используете язык сценариев, например 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 на полную ширину и без поплавка.

очевидно, что если вы используете 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;