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

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

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

遇到的問題

  1. 實現(xiàn)過程中遇到了一個小問題，我的卡片底部border會被截掉一塊
  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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論