用CSS3的column属性怎样做卡片瀑布流布局

Admin 2022-06-14 群英技术资�

这篇文章主要讲解了“用CSS3的column属性怎样做卡片瀑布流布局”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“用CSS3的column属性怎样做卡片瀑布流布局”吧�

实现效果

今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的�

最后使用css3中的column属性实现了这个布局,而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现�...naive�)

实现效果大概如下图~

相关属�

  1. column-count:想实现的列数,我这里只需�2�
  2. column-width:列的宽度
  3. column-gap:列之间的间隙
  4. break-inside:avoid:如果不将子元�(每个卡片)设置这个属性的话,就会出现一张卡片被截断显示在不同的列中的情�

遇到的问�

  1. 实现过程中遇到了一个小问题,我的卡片底部border会被截掉一�
  2. 通过设置子元素的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;
                }
        }

这篇关于“用CSS3的column属性怎样做卡片瀑布流布局”的文章就介绍到这了,更多相关的内容,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部