使用 CSS column-count 并不能仅平衡 Chrome 中的内容答案

【问题标题】：Using CSS column-count does not balance the content in Chrome only使用 CSS column-count 并不能仅平衡 Chrome 中的内容
【发布时间】：2014-06-03 18:12:17
【问题描述】：

我有一个目录页面，其中列出了目录中的故事，我想将它们显示在 3 列中。我希望输出在三列之间保持平衡，以便每列的高度大致相同。这些项目的高度不同。

但是，我发现 Chrome 无法正确平衡各列，因此前两列非常长，最后（第三）列非常短，通常没有，只有 1 或 2 个项目。我添加了属性

column-fill: balance;

可以肯定的是，即使它应该是默认值，但它没有区别。任何帮助表示赞赏。

CSS

#catalogue-section  {
/* Prevent vertical gaps */
line-height: 0;

-webkit-column-count: 3;
-webkit-column-gap:   0px;
-webkit-column-fill: balance;
-moz-column-count:    3;
-moz-column-gap:      0px;
-moz-column-fill: balance;
column-count:         3;
column-gap:           0px;
column-fill:balance;

}

#catalogue-section div {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important; 
}

HTML

见http://www.shortkidstories.com/story

如果您在 IE 或 Firefox 中访问此页面，它会平衡列，但在 Chrome 中不会。

【问题讨论】：

这些列对我来说平衡得很好，在 chrome 中。 MAC Chrome 版本 30.0.1599.101
在 FF 28.0 和 Chrome 34.0 中测试，Chrome 结果实际上更好。编辑：哦，当您向下滚动时，Chrome 中 2-3 项的第三列仍然为空
我正在使用 34.0.1847.116m，但它对我来说并不能始终如一地工作。由于项目以随机顺序呈现，您可能会发现不同的结果，但主要是不平衡的。如果第一个有效，然后翻到第 2 或第 3 页，您就会明白我的意思了。
我发现了问题！我使用 Animate.js 从 4 个不同方向飞入项目。我发现如果你使用 Animate.js 从下方飞入物品，那么它会破坏多列平衡 - 但仅限于 Chrome！这是一个非常深奥的错误。尽管如此，消除这种影响还是很容易解决的。感谢您调查伙计们。
@BrianM 您可以将您的解决方案发布为答案并将其标记为正确。

标签： css google-chrome multiple-columns

【解决方案1】：

OP 发现了问题。他使用 Animate.js 从 4 个不同方向飞入项目。他发现，如果您使用 Animate.js 从下方飞入物品，那么它会破坏多列平衡 - 但仅限于 Chrome！

（发布只是为了让其他人知道已解决）

【讨论】：

【解决方案2】：

这里是部分解决方案：

从#catalogue-section div 中删除height: auto !important;
然后给div.catalogue增加更多高度，例如min-height: 322px;
检查并相应调整。

【讨论】：