欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)屬性

  1. column-count:想實(shí)現(xiàn)的列數(shù),我這里只需要2列
  2. column-width:列的寬度
  3. column-gap:列之間的間隙
  4. break-inside:avoid:如果不將子元素(每個(gè)卡片)設(shè)置這個(gè)屬性的話,就會(huì)出現(xiàn)一張卡片被截?cái)囡@示在不同的列中的情況

遇到的問題

  1. 實(shí)現(xiàn)過程中遇到了一個(gè)小問題,我的卡片底部border會(huì)被截掉一塊
  2. 通過設(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)文章

最新評(píng)論