本文介紹了css3 column實現卡片瀑布流布局的示例代碼，分享給大家，具體如下：

實現效果

今天遇到了需要實現一個卡片的瀑布流布局的問題，卡片高度是不同的。

最后使用css3中的column屬性實現了這個布局，而且非常的簡便啊(lz隱約記得上次寫瀑布流的時候是用js實現的...naive啊)

實現效果大概如下圖～

相關屬性

column-count:想實現的列數，我這里只需要2列 column-width:列的寬度 column-gap:列之間的間隙 break-inside:avoid:如果不將子元素(每個卡片)設置這個屬性的話，就會出現一張卡片被截斷顯示在不同的列中的情況

遇到的問題

實現過程中遇到了一個小問題，我的卡片底部border會被截掉一塊 通過設置子元素的overflow:auto解決了

代碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。