基於Webkit的瀏覽器列規數的CSS規範

Question

我已經使用this tutorial在我當前的項目中實現了砌體佈局。

雖然在一些基於Webkit的瀏覽器（最新的谷歌瀏覽器和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。