CSS3 列填充不均匀答案

【问题标题】：CSS3 Columns aren't filling evenlyCSS3 列填充不均匀
【发布时间】：2014-07-21 20:28:14
【问题描述】：

有关我所说的内容的视觉参考，请查看以下站点并单击子标题下拉项之一：http://bmgz.rtcgraphics.com/#3

这是一个概念性问题，但我使用以下 CSS3 声明填充了一组三列：

#bullets {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 20px 10%;
    z-index: 5;
    color: white;
    width: 100%;
    background: rgba(0,0,0,0.4);
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 23.333%; /* Chrome, Safari, Opera */
    -moz-column-width: 23.333%; /* Firefox */
    column-width: 23.333%;
    -webkit-column-fill: balance; /* Chrome, Safari, Opera */
    -moz-column-fill: balance; /* Firefox */
    column-fill: balance;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

列填充不均匀。有时，列会填充，使得项目符号落在最后一列中的一组 2、2 和 0 项中。其他时候是 4、4、1。

我对浏览器如何决定填充列感到非常困惑。它似乎在所有浏览器中都是一致的。我的目标是让列从左到右水平填充，这样一组 4 个项目将填充 2、1、1

任何和所有的指导都会很有帮助！

谢谢！

【问题讨论】：

也许我很愚蠢，但我没有看到任何我会在该页面上描述为“副标题”的内容。你到底是什么意思？
如果您将鼠标悬停在其中一列上，这些列会展开以显示您可以单击的子标题，它将加载一个新的页面部分。

标签： css layout multiple-columns

【解决方案1】：

找不到这个问题的直接答案，但如果我只是将列表项 float:left 并拥有 ul 空间的 width: 33%，我会得到我想要的效果。上帝只知道为什么内置的 CSS 列填充如此不均匀。

【讨论】：

这似乎是 Chrome 独有的问题。我来这里是为了寻找答案，就像在 Chrome 中一样，当我在列表中有 8 个项目时，它们会根据需要分成 2 列，但是左列需要 5 个项目，右列只需要 3 个。当我在 Firefox 上打开同一页面时，它会根据需要拆分 4 和 4。
刚刚“解决”了它！我的li 列表项中有position: relative;，以便我可以实现自定义项目符号解决方案。删除相对位置后，列分成偶数个项目，在我的一个示例中为 4 和 4。注意：为了仍然实现自定义项目符号，我只是用 span 包裹了内部文本内容并将项目符号应用于该内容。