這篇文章將為大家詳細講解有關怎么在css3中利用column實現卡片瀑布流布局，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
相關屬性
column-count:想實現的列數，我這里只需要2列
column-width:列的寬度
column-gap:列之間的間隙
break-inside:avoid:如果不將子元素(每個卡片)設置這個屬性的話，就會出現一張卡片被截斷顯示在不同的列中的情況
遇到的問題
實現過程中遇到了一個小問題，我的卡片底部border會被截掉一塊
通過設置子元素的overflow:auto解決了
代碼
.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;
}
}關于怎么在css3中利用column實現卡片瀑布流布局就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
