html - 用随机高度 DL 填充垂直空间

Question

我正在设置一个包含 DL 的菜单 block ，每个 block 都包含某些选项。

这些 DL s 的高度各不相同，但它们都保持相同的宽度，所以我可以一次放两个。这些DL s 包含在 div 中地区。

我想做的是，当一个方 block 明显长于另一个方 block 时，下一个方 block 将挤到一侧并出现在其下方方 block 的正下方。

<div id="contentarea">
    <dl>This Dl has one DT and two DDs in it, one per line.</dl>
    <dl>This DL has one DT and six DDs in it, one per line.</dl>
    <dl>This DL has one DT and four DDs in it, one per line.</dl>
</div>

这个想法是因为第二个DL占用更多垂直空间，第三个 DL会自动将自己推到右边并占据第一个 DL 下面的空间.如果这第三个D L 会使左侧比右侧长，然后是下一个 DL会去的权利。如果相同或更小，则再次向左移动，直到超过右侧。

我会注意到，我试图不定义 DL就像有不同的类(class)一样。

在我的 CSS 中，我有我的 DL s 定义为 display作为inline-block , 就像 inline导致他们实际上没有正确使用右侧，只是显示每个 d我在它之前。

作为inline-block ，不过，他们所做的只是制作单独的行，而不填充一些 DL 之间的空间。秒。与 inline-block ，他们现在也使用右侧，但是当第三个进入时，它会下降到最长点以下，而不是像我希望的那样尝试填充下一个直接点。

Answer 1

为什么要使用 DL？

听起来你想要的效果可以用masonry.js来实现

http://masonry.desandro.com/

看看。