1.中间有白缝现象:
我在项目中使用column-count:2,进行瀑布流布局,然后误认为每列的宽度为屏幕的一半,经反复测试发现使用多列布局会有默认的column-gap:30px(值不够准确,但肯定有默认值)的列间隔,这就导致出现白缝:
只要在设置column-count的容器中,使用:
-webkit-column-gap: 0px;
这时每列的宽度才是屏幕的一半。
2.内容在两列显示:
为什么会出现这样的原因?应该是它的计算原理:将所有容器的高度求和,然后再除以列数,得出每列显示的内容高度。
解决方法:指定每个容器只能完整的显示,不分裂:
-webkit-column-break-inside: avoid;
注意:该代码写在每个容器中,而不是放在column-count的容器中。