php 瀑布流布局,CSS3实现瀑布流布局的方法
这次给大家带来CSS3实现瀑布流布局的方法,CSS3实现瀑布流布局的注意事项有哪些,下面就是实战案例,一起来看一下。
以前使用瀑布流都要用js,现在有了css3,可以轻松实现了。
掌握点:
1、column-count 把p中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
column-count 属性规定元素应该被分隔的列数:p
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-gap 属性规定列之间的间隔:p
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule 属性设置列之间的宽度、样式和颜色规则:p
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
实例:
CSS3瀑布流
/*大层*/
.container{width:80%;margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
.item img{
width: 100%;
margin-bottom:10px;
}
1 convallis timestamp
2 convallis timestamp 2 Donec a fermentum nisi.
3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.
5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php 瀑布流布局,CSS3实现瀑布流布局的方法相关推荐
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css">body,html{margin: 0;padding:0;}#container{position ...
- python绘制影像组学训练集、测试集对应的ROC曲线以及瀑布图(rad-score 瀑布图)
python绘制影像组学训练集.测试集对应的ROC曲线以及瀑布图(rad-score 瀑布图) # 所有数据的瀑布图 tagets_all = df['label'] tagets_all = df. ...
- html隐藏元素的方式,Web前端:CSS3——3种隐藏元素方法的区别
原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...
- 使用css3实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...
- 【CSS3】CSS3支持的颜色表示方法大全
色光三原色原理 色光的三原色是 红色(Red).绿色(Green).蓝色(Blue) 三种,可以构成缤纷的绚丽色彩. 实在不记得的话,这里左转百度百科 CSS3支持的颜色表示方法 用颜色英文名称表示. ...
- css3 实现圆角方法,CSS3 border-radius圆角的实现方法及用法详解
这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 以前想实现一个圆角是比较麻烦的,不 ...
- calc ie支持_让IE6/IE7/IE8支持CSS3属性的8种方法介绍
让IE6/IE7/IE8支持CSS3属性的8种方法介绍 发布时间:2013-09-23 10:43:06 作者:佚名 我要评论 IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现 ...
最新文章
- 上传大数据到SharePoint 2010
- oracle的后台进程能否杀掉
- CentOS6中安装、配置、启动GitLab以及遇到的那些坑
- Myeclipse创建第一个web项目
- OAuth2认证有一定的了解
- 容斥原理---概念介绍
- mysql 双主 脑裂_MySQL双主(主主)架构方案
- ppt 胡事民 计算机图形学_从相机标定到SLAM,极简三维视觉六小时课程视频(附PPT)...
- 《高质量程序设计指南——C++/C》(第三版)
- 压缩感知 热身实验 OMP算法Python实现(详细代码注释)
- Winxp系统文件夹完全解析
- python2代码转换为python3
- CDN加速技术可以解决网络客户的哪些痛点问题?
- gbt7714在overleaf中如何把英文作者大写变小写
- 舍友整日沉迷代码?偷偷给他的idea装上防沉迷插件!!
- 基于OCRA软件实现密度泛函计算优化双分子体系的复现实验,以ABPA和Trp为例
- Spring Security 5.0的DelegatingPasswordEncoder详解
- 动态规划简单例子——国王与金矿(c++)
- 数据结构在.net加密解密反流程混淆中的应用[看雪学院2006金秋读书季]
- IBM: 告别1.0迎接2.0,企业咨询进入技术驱动新时代
热门文章
- 图像处理与图像识别笔记(一)
- Python面试题大全(四):数据库篇
- JavaScript 逆向 ( 一 ) --- JavaScript 语法基础
- 安卓模拟器 Genymotion 安装
- Encapsulate Collection(封装集合)
- fedora 27 mysql_无法在Fedora27上的Python2 virtualenv中使用mysqldb
- 动手学CV-目标检测入门教程3:锚框(anchor)
- 5gh掌上云计算认证不通过_阿里云ACP认证考试攻略、考试心得、费用及常见问题...
- php 命名空间通俗易懂_PHP进阶由浅入深掌握面向对象开发
- JAVA入门级教学之(标识符与关键字)