如何安排包裹的div到顶部？

Question

在我的Web应用程序屏幕中，我有许多区域具有相同的宽度和不同的高度。 例如。我有六个div：

    <div style="height: 50px">1</div>
    <div style="height:150px">2</div>
    <div style="height:250px">3</div>
    <div style="height:130px">4</div>
    <div style="height:120px">5</div>
    <div style="height: 30px">6</div>

和css：

    div{
        border:1px solid red;
        float:left;
        width:100px;
    }

浏览器显示如下：

如果浏览器窗口更改为更小的宽度，div会自动换行。 包裹的div根据具有最大高度的顶部div对齐。毋 屏幕上出现空格：

有没有办法将所有包装的div排列到顶部？

Answer 1

试试这个......

http://masonry.desandro.com//

它可能比您想要/需要的更加闪亮。但是没有一个CSS选项可以解决这个问题。

Answer 2

我不知道在CSS中有什么方法可以做到这一点。如果您不反对使用JavaScript，jQuery Masonry插件应该可以让您执行此操作。