css3 column實現(xiàn)卡片瀑布流布局的示例代碼
發(fā)布時間:2018-06-22 16:06:06 作者:soleil阿璐
我要評論

這篇文章主要介紹了css3 column實現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了css3 column實現(xiàn)卡片瀑布流布局的示例代碼,分享給大家,具體如下:
實現(xiàn)效果
今天遇到了需要實現(xiàn)一個卡片的瀑布流布局的問題,卡片高度是不同的。
最后使用css3中的column屬性實現(xiàn)了這個布局,而且非常的簡便啊(lz隱約記得上次寫瀑布流的時候是用js實現(xiàn)的...naive啊)
實現(xiàn)效果大概如下圖~
相關(guān)屬性
- column-count:想實現(xiàn)的列數(shù),我這里只需要2列
- column-width:列的寬度
- column-gap:列之間的間隙
- break-inside:avoid:如果不將子元素(每個卡片)設(shè)置這個屬性的話,就會出現(xiàn)一張卡片被截斷顯示在不同的列中的情況
遇到的問題
- 實現(xiàn)過程中遇到了一個小問題,我的卡片底部border會被截掉一塊
- 通過設(shè)置子元素的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; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了3種方式實現(xiàn)瀑布流布局小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-09-05
詳解純css實現(xiàn)瀑布流(multi-column多列及flex布局)
這篇文章主要介紹了詳解純css實現(xiàn)瀑布流(multi-column多列及flex布局)的相關(guān)資料,用multi-column多列布局及flex布局實現(xiàn)瀑布流,感興趣的小伙伴們可以參考一下2018-09-04- 這篇文章主要介紹了用CSS3實現(xiàn)瀑布流布局的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-10
CSS3實現(xiàn)瀑布流布局與無限加載圖片相冊的實例代碼
本篇文章主要介紹了CSS3實現(xiàn)瀑布流布局與無限加載圖片相冊的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-12-22瀑布流布局的兩種實現(xiàn)方式:傳統(tǒng)多列浮動和絕對定位布局
瀑布流布局想必大家對它并不陌生吧,在一些網(wǎng)站上都會有這種效果的出現(xiàn),下面為大家介紹下使用兩種方式實現(xiàn)傳統(tǒng)多列浮動和絕對定位布局,具體的實現(xiàn)代碼如下,感興趣的朋友2013-08-26waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2021-01-19