Question

我有一个看似简单的问题，但我还没有找到解决方案。我有一系列高度不同的div，认为它们的宽度通常是相同的。我希望流畅的布局基本上会在页面调整大小时生成可变数量的列。适合漂浮左侧。问题是，当div是不同的高度时，最终会在元素之间垂直存在大量的空白区域。

显然，简单的解决方案是编写一些javascript来为我做所有这些。但如果有一个css解决方案，我不愿意诉诸于此。

这是一个简单的例子：

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Simple Float Example</title>

        <style type="text/css">
            .dv { border: solid 1px red; float: left; width: 300px; }
        </style>

    </head>
    <body>
        <div>
            <div style="height: 40px;" class="dv"></div>
            <div style="height: 20px;" class="dv"></div>
            <div style="height: 60px;" class="dv"></div>
            <div style="height: 20px;" class="dv"></div>
        </div>
    </body>
</html>

你会看到，当页面很窄时，一切看起来都像你期望的那样。所有的div都堆积起来了。如果您将页面扩展到完整大小，再一次 - 一切看起来都很好。但是当有2或3列时，看看有多少额外的空间。我发布了一张图片，但我的声誉还不允许我这样做。

无论如何，我尝试了各种显示和位置设置，我无法让它真正做到我想要的。

有什么建议吗？谢谢！

-RP