css - CSS - 按高度将长列表分成几列

Question

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

在这个例子中，我需要在高度达到 400px 时将右侧列表分成第二列，并且与其余<li>元素相同（在上面的链接中，我想在“婴儿礼物”之后将列分成 2并将“MEN”放在第二列。

我已经测试了很多东西，比如有 没有办法将列表分成列？这但它不会创建我想要的列。

这是我追求的结果，这是一个JSFiddle

有什么建议么？

Answer 1

您引用的两个问题中的解决方案都涉及 columns 属性，它们应该正常工作。您的内容无法拆分到您想要的位置，因为 400 像素的截止值太小。

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

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