我正在设置一个由DL块组成的菜单，每个块都包含某些选项。
这些DL都具有不同的高度，尽管它们都保持相同的宽度，所以我可以一次装两个。这些DL包含在div区域内。
我想要做的是，当一个块明显长于另一个块时，下一个块将挤压到一侧，并在其下方的块下方上升。
<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定义为具有不同的类。
在我的CSS中，我将DL定义为display为inline-block，因为只有inline导致他们没有正确使用右侧而只是显示每个d l低于它之前的那个。
作为inline-block，他们所做的只是制作单独的行而不填充某些DL之间的空格。使用inline-block时，他们现在也使用右侧，但是当第三个进入时，它会降到最长点以下，而不是像我想要的那样尝试填充下一个立即点。