可变高度处的CSS浮动Div

Question

可变高度处的CSS浮动Div

我有一个100 px宽度的无限个div，它可以容纳一个250 px宽度的父级。无论高度如何，我都需要在行中显示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>

这是小提琴

以下是我使用javascript所做的和取得的成就https://jsfiddle.net/8o0nwft9/

Answer 1

据我所知，无法用纯CSS(在所有常见浏览器中都有效)解决这个问题：浮子不工作.display: inline-block 不起作用.position: relative带着position: absolute要求手动像素调谐..如果您使用的是服务器端语言，并且正在处理图像(或具有可预测高度的东西)，则可以使用服务器端代码“自动”处理像素调优。相反，使用jQuery砌体.

Answer 2

假设您的需求更像您的有色示例代码，那么：.box:nth-child(odd){     clear:both;}如果是3行nth-child(3n+1)

Answer 3

从这个评论中得到一点帮助(CSS块左浮动我想出了答案。在我所做的每一行中，我都添加了一个类名。left.在我所做的每一个“行”上，我都添加了一个类名。right.然后，我为每个类名向左浮动和向右浮动！唯一复杂的是，我的内容顺序在“右”行上被颠倒了，但是可以使用PHP来解决。谢谢你们的帮助！#holder{&nbsp; width:200px;&nbsp; border:1px dotted blue;&nbsp; display:inline-block;}.box{&nbsp; width:100px;&nbsp; height:150px;&nbsp; background-color:#CCC;&nbsp; float:left;&nbsp; text-align:center;&nbsp; font-size:45px;}.one{&nbsp; background-color:#0F0;&nbsp; height:200px;}.two{&nbsp; background-color:#0FF;}.three{&nbsp; background-color:#00F;&nbsp; float:right;}.four{&nbsp; background-color:#FF0;&nbsp; float:right;}.left{float:left;}.right{float:right;}<div id="holder">&nbsp; <div class="box one left">1</div>&nbsp; <div class="box two left">2</div>&nbsp; <div class="box four right">4</div>&nbsp; <div class="box three right">3</div></div></body>