css - 具有特定溢出的两列列表

Question

您将如何创建一个简单的 html/css 页面，该页面可以显示带有元素列表的 2 列，以便第一列先填满然后流入第二列，即不平衡列高.

例如:

------------------
1. John  
2. Alan  
3. Matt  

------------------
1. John  5. Suzie
2. Alan  
3. Matt  
4. Phil  
------------------
1. John  5. Suzie
2. Alan  6. Cathy
3. Matt  7. Bob
4. Phil  8. Richard
------------------

我试过一个列数为 2 的 div；但是例如，对于 4 个元素，它会将它们分成每列中的 2 个元素，我希望第一列中的所有 4 个元素。

谢谢!

Answer 1

只需使用column-fill: auto:

-moz-column-fill: auto;
     column-fill: auto;

下次您提出问题时，分享您的代码。