使用CSS列计数不会仅仅平衡Chrome中的内容

Question

我有一个目录页面,列出目录中的故事,我想在3列中显示它们.我希望输出在三列之间保持平衡,这样每列的高度大致相同.每个项目的高度都不相同.

但是我发现Chrome没有正确地平衡列,因此前两列很长,最后(第3)列非常短,通常只有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中进行平衡.

Answer 1

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

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