html - 如何将包装好的 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 插件应该可以让您执行此操作。