Question

有关我正在谈论的内容的直观参考，请参阅以下网站，然后点击其中一个子标题下拉项：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

任何和所有指导都会非常有用！

谢谢！

Answer 1

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

CSS3列未均匀填充

1 个答案: