本文介紹了css3 column實現卡片瀑布流布局的示例代碼，分享給大家，具體如下：
實現效果
今天遇到了需要實現一個卡片的瀑布流布局的問題，卡片高度是不同的。
最后使用css3中的column屬性實現了這個布局，而且非常的簡便啊(lz隱約記得上次寫瀑布流的時候是用js實現的...naive啊)
實現效果大概如下圖～
相關屬性
遇到的問題
代碼
.videoCards { padding-top: 4rpx; column-count: 2; column-gap: 18rpx; .card { display: inline-block; margin-top: 20rpx; width: 326rpx; background: #FFFFFF; box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.10); border-radius: 14rpx; break-inside: avoid; padding-bottom: 20rpx; overflow: auto; } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
