CSS - 按长度将长列表拆分为列

Question

我正在尝试创建一个多列列表，但我得到的结果并不理想。

在this example中，当高度达到400px时，我需要将右侧列表分成第二列，与其他<li>元素相同（在上面的链接中，我想要在“BABY GIFTS”之后将专栏打成2并将“MEN”放在第二栏。

我测试了许多内容，例如this Is there a way to break a list into columns?和this，但它没有创建我想要的列。

这是我在之后的结果，这里是JSFiddle

有什么建议吗？

Answer 1

您引用的涉及列属性的两个问题中的解决方案都可以正常工作。您的内容无法分割到您想要的位置，因为400px截止值太小。

http://jsfiddle.net/HVZkG/1/

#productsitemap {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    height: 400px;
}