Html CSS多列布局：不正确的列拆分

在计算多列css属性时似乎有一个bug，在我签入的所有浏览器（最新的Chrome、IE11和Firefox）中都有。如果列表中有9项，并尝试将其拆分为4列，则最后一列始终为空

是否有任何变通办法，可以将其拆分为3/2/2/2？提前谢谢

ul{
-moz列数：4；
-webkit列数：4；
列数：4；
背景颜色：灰色；
}
李{
背景色：番茄；
}

项目
项目
项目
项目
项目
项目
项目
项目
项目

使用以下方法：

.keeptogether{
display:inline-block;
width:100%
}

ul{
-moz列数：4；
-webkit列数：4；
列数：4；
背景颜色：灰色；
}
李{
背景色：番茄；
}
keeptogether先生{
显示：内联块；
宽度：100%
}

项目
项目
项目
项目
项目
项目
项目
项目
项目

---

在不同的浏览器中，-*列似乎有很多问题。在您的示例中，如果要再添加1个li元素，则可以看到它将在第4列中自行填充。我猜这是一个可分性问题。

它的工作方式与它应该工作的方式相同，在3列中有足够的空间容纳9个项目，这就是为什么它没有进入第4列，降低高度，它将被分成更多列。或者在第4列中添加更多的

li

ul{
-moz列数：4；
-webkit列数：4；
列数：4；
背景颜色：灰色；
高度：50px；
}
李{
背景色：番茄；
}

项目
项目
项目
项目
项目
项目
项目
项目
项目

列号正好是4，但每列的最小项目数是3个项目，因此如果您再添加一个

li

，它将显示在最后一列9%4！=0基本上，为什么要这样做？你期望会发生什么？这不是关于计算柱高度的问题，当一列有3个项目时，其他人也会为另一列创建空间是的，这个问题不是关于

ul

高度的问题，即使设置其高度可能会影响到柱的数量，但它并不能解决真正的问题。问题是我需要一个动态高度，例如，如果一行中添加了更多的元素，那么就不会有任何问题。专栏将很好地工作！请解释您的否决票，以便我可以改进答案。如果我将高度设置为固定数字，然后添加更多列表项，它们将溢出ul，并且不可见使用自动填充列，这些列将根据元素高度填充。您不能在ul和li元素之间放置div，这是无效的html。