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

您所引用的两个问题中涉及列属性的解决方案都可以正常工作。由于 400 像素的分界线太小，您的内容无法在您想要的位置拆分。

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

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