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

Posted 2023-03-05

【中文标题】使用 CSS column-count 并不能仅平衡 Chrome 中的内容

【英文标题】：Using CSS column-count does not balance the content in Chrome only

【发布时间】：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 您可以将您的解决方案发布为答案并将其标记为正确。

【参考方案1】：

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

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

【参考方案2】：

这里是部分解决方案：

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