css - 并排放置 HTML 列表

Question

我想在固定大小的 <div> 中并排放置可变数量的 HTML 列表如下元素:

+--------------------------------+
| LIST 1     LIST 2     LIST 3   |
| - xxx      - xxx      - xxx    |
| - xxx      - xxx               |
|            - xxx               |     I need this line break –
|                                | <-- I don't want LIST 4 to be
| LIST 4                         |     directly beneath LIST 1!
| - xxx                          |
| - xxx                          |
+--------------------------------+

我 float 了列表 ( float: left; ) 以使它们并排放置，但我不知道如何避免 LIST 4 尽可能向上移动(直到它直接位于 LIST 1 下方)。

如何获得 LIST 1 和 LIST 4 之间的垂直间距？有什么办法可以使用 clear属性优雅地解决这个问题？

Answer 1

对不起。如果列表的数量和每个列表中的元素不同，则没有简单的纯 CSS 解决方案。