不考虑 CSS 列数答案

【问题标题】：CSS column-count not respected不考虑 CSS 列数
【发布时间】：2017-05-02 07:39:24
【问题描述】：

这里有一个类似的问题，没有真正的答案：CSS columns bug — 5 column count only showing 4 (with images)

我使用column-count 在列中显示元素（在本例中是一组section 元素，但无论使用什么元素都会发生这种情况（显然）。

问题在于 Chrome 和 Firefox（没有尝试过其他）并不总是遵守指定的列数。

如果我将它设置为 4，有时会是 4，有时会小于 4（谢天谢地，永远不会更多）。

如果我使用 Firebug（或类似工具）来修改列中某些元素的高度，有时列会从 3 跳到 4。

这真的很奇怪也很烦人，我希望有人知道为什么会发生这种情况并希望如何解决它。

这是一个显示问题的 JSFiddle：http://jsfiddle.net/NY2Zx/ 您可以调整图像的尺寸以查看列数的变化。

谢谢

【问题讨论】：

也将margin-bottom 更改为9px 或更少工作正常！！！

标签： css

【解决方案1】：

检查这个http://www.w3.org/TR/css3-multicol/#pseudo-algorithm

如果用本地 html 文件编写并在 firefox 和 chrome 中加载，JSFiddle 示例可以正常工作。尝试为 div 元素指定宽度。

【讨论】：

【解决方案2】：

在您的示例（jsfiddle）中，有 5 个大小相等的元素分布到 4 列中。由于它们不适合彼此相邻（它们超过 4 个），因此第一列将包含 2 个元素。这定义了容器的高度，因此第二列也将获得 2 个元素，因此第三列还有一个，第四列没有。有四列，但第四列是空的...

换句话说：容器的高度由将所有元素放入列数所需的最小高度确定。完成后，内容将从左侧开始填充到列中，并且每列将获得尽可能多的内容。

【讨论】：

对，如果我要求 4 列，我会希望得到 4 列 :)
好吧，如果你有 7 个元素，你会看到 4 列...它们在那里，毕竟第四个是空的。
我相信这是正确的，所以我会给你答案，但是 imo 这使得列数对很多事情几乎没有用处。

【解决方案3】：

这里是工作示例，但带有图像换行元素。

.wrap {    
    -webkit-columns: 4 auto;
    -moz-columns: 4 auto;
    columns: 4 auto;
}

.wrap .img {
    display: block;
    margin: 0 0 10px;
    line-height: 0px;
}

如果更改 line-height 则再次出现错误。

http://jsfiddle.net/NY2Zx/4/

【讨论】：

这（在列元素上将行高设置为 0）实际上似乎有效 - 但为什么呢？ :) 编辑：或者...嗯。它在这里不起作用：jsfiddle.net/NY2Zx 它实际上不适用于我的真实案例。我发现将宽度设置为 px 值而不是 % 是可行的。这几乎看起来是随机的。
这个解决方案并没有真正起作用。如果使用删除一项，我们也会遇到同样的问题：我们看到：2 + 2 +2 + 0 个元素。

【解决方案4】：

无论出于何种原因，我不知道为什么，在文本后面有一个空段落会再次重排列。这不是一个理想的解决方案，因为它应该在没有空元素的情况下流动，但对于仍然遇到此问题的人来说，这是我遇到的可能的快速解决方案。

【讨论】：