关于column-count多列布局出现“列中间有白缝”和“一个内容被切割在两列显示”的解决方法

1.中间有白缝现象：
我在项目中使用column-count:2，进行瀑布流布局，然后误认为每列的宽度为屏幕的一半，经反复测试发现使用多列布局会有默认的column-gap:30px(值不够准确，但肯定有默认值)的列间隔，这就导致出现白缝：

只要在设置column-count的容器中，使用：

-webkit-column-gap: 0px;

这时每列的宽度才是屏幕的一半。

2.内容在两列显示：

为什么会出现这样的原因？应该是它的计算原理：将所有容器的高度求和，然后再除以列数，得出每列显示的内容高度。

解决方法：指定每个容器只能完整的显示，不分裂：

  -webkit-column-break-inside: avoid;

注意：该代码写在每个容器中，而不是放在column-count的容器中。