css3 column實現卡片瀑布流布局的示例代碼

2024-07-11 08:59:15

字體：大中小

來源：轉載

供稿：網友

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

實現效果

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

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

實現效果大概如下圖～

相關屬性

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;                }        }

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

上一篇：css input[type=file] 樣式美化(input上傳文件樣式 )

下一篇：CSS3實現背景透明文字不透明的示例代碼