Question

我有一个动态生成的div列表，表示用于选择各种选项的面板。有两种类型的div，常规和短。常规div的高度用javascript设置为最高的高度。另外，如果te short div的高度小于最大值的一半，则设置为该高度的一半，否则设置为全高。

我现在想要做的事情（最好是使用CSS）是以这样的方式列出这些项目：如果有足够的空间，将一个短div放在另一个排序div之下。

以下是一些有希望让事情更清晰的插图：

Answer 1

据我所知，纯粹使用CSS是不可能的：如果您使用clear: left提供小方框，它们将显示在所有其他小方框下方。如果不这样做，它们将彼此相邻。

我能想到的最简单的解决方法是手动将两个小盒子组合成一个单独的div。这是一个有效的例子：

<html>
<head>
    <style type="text/css">
        div.large, div.small { width: 40px; margin: 5px; }
        div.large { height: 95px; background-color: blue; }
        div.small { height: 45px; background-color: red; }
        div.large, div.smallblock { float: left; }
    </style>
</head>
<body>
    <div class="large">1</div>
    <div class="large">2</div>
    <div class="smallblock">
        <div class="small">3</div>
        <div class="small">4</div>
    </div>
    <div class="smallblock">
        <div class="small">5</div>
        <div class="small">6</div>
    </div>
    <div class="large">7</div>
</body>
</html>

Answer 2

没有通用纯CSS解决方案。

请参阅我之前的答案，以比较候选技术：

CSS Floating Divs At Variable Heights

除非您可以使用服务器端代码手动计算像素并使用position: relative / position: absolute; top: ?px; left: ?px，否则您将不得不求助于JavaScript来处理定位。

这个jQuery插件通常是一个很好的解决方案：jQuery Masonry

还有一个原始JavaScript版本：Vanilla Masonry

我发现自己经常推荐它：

https://stackoverflow.com/search?q=user%3A405015+masonry

一些可能相关的演示：

如何将div放在另一个下面的div中

2 个答案: