我有一个目录页面,其中列出了目录中的故事,我想将它们显示在 3 列中。我希望输出在三列之间保持平衡,以便每列的高度大致相同。每个元素的高度都不相同。
但是我发现 Chrome 无法正确平衡各列,因此前两列很长,最后(第 3 列)很短,通常没有,只有 1 或两个元素。我添加了属性
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 column-count 并不能仅平衡 Chrome 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23167594/