本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下:
实现效果
今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的。
最后使用css3中的column属性实现了这个布局,而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的...naive啊)
实现效果大概如下图~
相关属性
遇到的问题
代码
.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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...