如何安排包裹的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

我不知道任何方式在CSS来做到这一点。如果您不反对使用JavaScript，jQuery Masonry插件应该可以让您做到这一点。

Answer 2

尝试......

http://masonry.desandro.com//

它可能比你想/需要什么华丽一点。但是没有一个CSS选项来解决这个问题。