可变高度的CSS浮动分区

Question

我有无限数量的100px宽度的div,可以放入250px宽度的父级.无论高度如何,我都需要将div显示在行中,如图所示.我已经尝试过解决这个问题,但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/所做和所取得的成就

Answer 1

据我所知,没有办法用纯CSS解决这个问题(适用于所有常见的浏览器):

• 浮点不起作用.
• display: inline-block 不起作用.
• position: relative与position: absolute需要手动调谐像素.如果您使用的是服务器端语言,并且正在处理图像(或具有可预测高度的内容),则可以使用服务器端代码"自动"处理像素调整.

相反,使用jQuery Masonry.

Answer 2

假设您的需求更像是您的彩色示例代码:

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

如果它将是3行然​​后 nth-child(3n+1)

Answer 3

我提供这个答案是因为即使有很好的解决方案(使用Masonry)仍然不清楚为什么不能通过使用浮动来实现这一点.

(这很重要 - #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>

在上面的图片你可以看到div.5被摆放就在旁边div.3,这是因为在它的线(由线中定义div.4),这是因为到目前为止,它可以走了,div.1*,div.2*,等,也左浮动的div.5,但因为他们不适合在那条线上他们去了下面的线(由线框定义div.5)

现在请注意,当我们将高度减少到div.2*足以小于div.4*传递给它的高度时div.5*:

我希望这有助于澄清为什么使用浮点数无法实现这一点.我只澄清使用浮点数(不是内联块),因为标题为" CSS浮动Div在可变高度 ",因为现在答案很长.

Answer 4

正如已经正确指出的那样,单独使用CSS是不可能的......幸运的是,我现在已经在http://isotope.metafizzy.co/找到了解决方案.

它似乎完全解决了这个问题.