css - 使用CSS列计数不会仅在Chrome中平衡内容

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

但是，我发现Chrome无法正确平衡各列，因此前两列很长，最后(3rd)列很短，通常没有，只有一两个元素。我已经添加了属性

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中保持平衡。

最佳答案

OP发现了问题。他正在使用Animate.js从4个不同的方向飞来飞去。他发现，如果您使用Animate.js从下方飞入物品，那么它会破坏多列平衡-但是仅在Chrome上!

(发布只是为了让其他人知道已经解决了)

关于css - 使用CSS列计数不会仅在Chrome中平衡内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23167594/