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！

（仅限发布让其他人知道已解决）

Answer 2

以下是部分解决方案：

从height: auto !important;

#catalogue-section div

然后向div.catalogue添加更多高度，例如min-height: 322px;
检查并相应调整。

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

2 个答案: