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

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