我有一个看似简单的问题,但我还没有找到解决办法。我有一系列的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>

当页面很窄的时候,你会看到所有的东西看起来都和你期望的一样。所有的沙发都叠起来了。如果你把页面扩展到最大,一切看起来都很好。但是当有2或3列时,看看有多少额外的空间。我想发布一个图片,但我的名声还不允许我这么做。
无论如何,我尝试了各种显示和位置设置,但我无法让它真正做我想做的事情。
有什么建议吗?谢谢!
-卢比

最佳答案

你喜欢这种造型吗?
http://desandro.com/resources/jquery-masonry/
如果是的话,不,没有简单的方法来处理纯css。你也需要一点JS。

10-07 21:50
查看更多