瀑布流的 Elementor 佈局核心是基於網格的一個 Elementor 佈局,而且高度是根據其中內容的而變化的,呈堆疊形式排列。
 

  實現方法:首先在父級樣 CSS 樣式里加入:column-count: 2; column-gap: 0;column-count 為列數; column-gap 為每列間隔距離; column-rule 為間隔邊線大小; column-width 為每列寬度; 當只設定 column-width 時,瀏覽器視窗小於一列寬度時,列中內容自動隱藏; 當只設定 column-count 時,平均計算每列寬度,列內內容超出則隱藏; 都設了 column-count 和 column-width,瀏覽器會根據 count 計算寬度和 width 比較,取大的那個值作為每列寬度,然後當視窗縮小時,width 的值為每列最小寬度。這邊其實很簡單,簡易自己嘗試下。在 CSS 中有一個 break-inside 屬性,這個屬性也是實現瀑布流 Elementor 佈局最關鍵的屬性,為了控制文字塊分解成單獨的列,這樣一個 CSS 實現瀑布流的方法就實現了。