可变高度的 CSS 浮动 Div [重复]

我有无限数量的 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 http://jsfiddle.net/XFX55/

这是我使用 javascript 所做的和实现的https://jsfiddle.net/8o0nwft9/ https://jsfiddle.net/8o0nwft9/

据我所知，没有办法用纯 CSS 来解决这个问题（适用于所有常见的浏览器）：

• Floats 不工作 http://jsfiddle.net/bCgea/.
• display: inline-block 不起作用 http://jsfiddle.net/bCgea/1/.
• position: relative with position: absolute需要手动像素调整 http://jsfiddle.net/bCgea/2/。如果您使用服务器端语言，并且正在处理图像（或具有可预测高度的内容），则可以使用服务器端代码“自动”处理像素调整。

相反，使用jQuery 砌体 http://masonry.desandro.com/.