基于Webkit的浏览器中列计数的CSS规范

Question

我已经使用this tutorial在我当前的项目中实现了一个砌体布局。

在某些基于Webkit的浏览器（最新的Google Chrome和Vivaldi）上进行测试时，存在一个问题，即浏览器不符合column-count规范。

Plunk here

在桌面设备（md或lg）的特定情况下，当容器包含两个元素时，这些子项将垂直堆叠而不是占用两列。对于Firefox，内容使用两列，最右边的列为空。

当容器中有三个元素时，Firefox使用三列，而Webkit仅使用两列。 Webkit实际上使用三列需要至少4或5个元素，这意味着有足够的空间。要测试切割点，请在HTML源代码中上下移动开头注释行<!--。

我能做些什么才能拥有像Firefox和IE这样的“正确”行为？我理解列的方式是，当内容可以容纳的空间足够时，内容将分布在指定的列数上。我错了吗？或者只是Webkit向我突发奇想？

Answer 1

.example {
  -webkit-column-count: value;
     -moz-column-count: value;
          column-count: value;
 }

尝试使用Autoprefixer和Caniuse。