css3 column实现卡片瀑布流布局的示例代码


Posted in HTML / CSS onJune 22, 2018

本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下:

实现效果

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

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

实现效果大概如下图~

css3 column实现卡片瀑布流布局的示例代码

相关属性

  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;
                }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 #HTML / CSS
CSS3实现可翻转的hover效果
May 23 #HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 #HTML / CSS
CSS3实现多样的边框效果
May 04 #HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 #HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 #HTML / CSS
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python通过zabbix api获取主机
2018/09/17 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python适配器模式代码实现解析
2019/08/02 Python
python 实现dict转json并保存文件
2019/12/05 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
建筑实习自我鉴定
2013/10/18 职场文书
销售员岗位职责范本
2014/02/03 职场文书
采购部部长岗位职责
2014/02/06 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
陈欧的广告词
2014/03/18 职场文书
购房协议书
2014/04/11 职场文书
音乐教师求职信
2014/06/28 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
后进生评语大全
2015/01/04 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书