CSS плавающие Divs в переменных высотах

У меня есть бесконечное количество divs ширины 100px, которое может вписаться в родительскую ширину 250px. Независимо от высоты, мне нужно, чтобы divs отображались в строках, как показано на изображении. Я пробовал разрешить это, но высота div, кажется, прикручивает его.

Я очень благодарен за вашу помощь. Спасибо:)

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

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

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

        .four{
            background-color:#FF0;
        }
    </style>

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

Вот jsfiddle

Вот что я сделал и добился с помощью javascript https://jsfiddle.net/8o0nwft9/

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Итак, поставьте так:

У нас есть 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 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 слева направо

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

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>

Ответ 4

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

Кажется, что проблема полностью решена.

Ответ 5

С небольшой помощью из этого комментария (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>

Ответ 6

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

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

Ответ 7

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

Else, jQuery Masonry работает лучше всего.

Ответ 8

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

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

Ответ 9

чтобы отобразить, просто поместите этот 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;
}

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

Ответ 10

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

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