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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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
PHP cron中的批处理
2008/09/16 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
自己的js工具 Event封装
2009/08/21 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
python去除字符串中的换行符
2017/10/11 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
yy婚礼主持词
2014/03/14 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS