考虑以下HTML：
<div class='x'>
<ul>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
<li>Number four is a bit longer</li>
<li>Number five</li>
</ul>
</div>
和以下CSS：
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
就目前情况而言，Firefox目前与以下内容类似：
• Number one • Number three bit longer
• Number two • Number four is a • Number five
注意，第四项在第二和第三列之间分配。我该如何预防？
所需的渲染可能更像：
• Number one • Number four is a
• Number two bit longer
• Number three • Number five
要么
• Number one • Number three • Number five
• Number two • Number four is a
bit longer
编辑：仅指定宽度以演示不需要的渲染。在实际情况下，当然没有固定的宽度。
我更新了实际答案。
这似乎适用于Firefox和Chrome：http： //jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/
注：该浮动属性似乎是一个作为块行为。