CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用CSS列计数不会仅仅平衡Chrome中的内容大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个目录页面,列出目录中的故事,我想在3列中显示它们.我希望输出在三列之间保持平衡,这样每列的高度大致相同.每个项目的高度都不相同.

但是我发现Chrome没有正确地平衡列,所以前两列很长,最后(第3)列非常短,通常只有1或2个项目.我添加了属性@H_673_3@

column-fill: balance;

可以肯定的是,即使它应该是默认值,但它没有任何区别.任何帮助赞赏.@H_673_3@

CSS@H_673_3@

#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@H_673_3@

http://www.shortkidstories.com/story@H_673_3@

如果您在IE或Firefox中转到此页面,则会平衡列,但不会在Chrome中平衡.@H_673_3@

解决方法

OP发现了这个问题.他正在使用Animate.js从4个不同的方向飞过物品.他发现,如果你使用Animate.js从下面飞过物品,那么它会破坏多列平衡 – 但仅限Chrome!

(仅限发布让其他人知道已解决)@H_673_3@

大佬总结

以上是大佬教程为你收集整理的使用CSS列计数不会仅仅平衡Chrome中的内容全部内容,希望文章能够帮你解决使用CSS列计数不会仅仅平衡Chrome中的内容所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。