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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
php google或baidu分页代码
2009/11/26 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
javascript 文档的编码问题解决
2009/03/01 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
js中document.write的那点事
2014/12/12 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
js面向对象的写法
2016/02/19 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python中global与nonlocal比较
2014/11/21 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
编辑找工作求职信范文
2013/12/16 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
内勤主管岗位职责
2014/04/03 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
物流业务员岗位职责
2015/04/03 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电