首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3使用多列制作瀑布流

Posted in HTML / CSS onMay 10, 2016

先来来看一看CSS3如何实现多列显示，代码如下

CSS Code复制内容到剪贴板
  1. <div class="div1">   
  2. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  3. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  4. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  5. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  6. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  7. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  8. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  9. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  10. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  11. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  12. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  13. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  14. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  15. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  16. </div>   
  17.   
  18. .div1{   
  19. /*分列的数量*/  
  20. column-count: 4;   
  21. -moz-column-count:4;   
  22. /*每一个分列中间的距离*/  
  23. -moz-column-gap: 70px;   
  24. column-gap: 70px;   
  25. /*每两个列之间的线和线的颜色*/  
  26. column-rule: 5px outset #FF0000;   
  27. -moz-column-rule: 5px outset #FF0000;   
  28. }   
  29.   

效果图：

CSS3使用多列制作瀑布流

CSS3使用多列制作瀑布流：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link href="countstyle.css" type="text/css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <!--尽量在做图片的时候使其宽度相等-->
  11. <div><img src="img/1.png">
  12. <p>这里是产品描述</p></div>
  13. <div><img src="img/2.png"></div>
  14. <div><img src="img/3.png"></div>
  15. <div><img src="img/4.png">
  16. <p>这里是产品描述</p></div>
  17. <div><img src="img/5.png"></div>
  18. <div><img src="img/6.png"></div>
  19. <div><img src="img/7.png">
  20. <p>这里是产品描述</p></div>
  21. <div><img src="img/8.png"></div>
  22. <div><img src="img/9.png"></div>
  23. <div><img src="img/1.png"></div>
  24. <div><img src="img/2.png"></div>
  25. <div><img src="img/3.png"></div>
  26. <div><img src="img/4.png">
  27. <p>这里是产品描述</p></div>
  28. <div><img src="img/5.png"></div>
  29. <div><img src="img/6.png"></div>
  30. <div><img src="img/7.png"></div>
  31. <div><img src="img/8.png"></div>
  32. <div><img src="img/9.png"></div>
  33. </div>
  34. </body>
  35. </html>
  38. .container{
  39. /*需要适配浏览器，这里因为只用了火狐浏览器，就不再写其他的适配代码了*/
  40. column-width: 300px;/* 给图片区域设定宽度，高度自适应 */
  41. -moz-column-width: 300px;
  43. -moz-column-gap: 5px;
  44. column-gap: 5px;
  45. /*column-count: 4;*/
  46. /*-moz-column-count: 4;*/
  49. }
  50. .container.div{
  51. width: 250px;
  52. margin:5px;
  53. }
  54. .container p{
  55. text-align: center;
  56. }

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3使用多列制作瀑布流

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记（一）
Apr 26 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 #HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 #HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 #HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 #HTML / CSS
CSS3美化表单控件全集
Jun 29 #HTML / CSS
apt命令(1) netty(1) 加密(1) json_extract(1) 类加载器(1) Launch Mode(1) NoSQL(1) Pickle(1) JOIN(1) logging(1)
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
微信小程序如何获取用户收货地址
2018/11/27 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python tempfile模块学习笔记（临时文件）
2014/05/25 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python爬取微信公众号文章
2018/08/31 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
海滩咖啡馆：Beach Cafe
2018/02/02 全球购物
Bibloo匈牙利：女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
C#中的验证控件有几种
2014/03/08 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
5s标语大全
2014/06/23 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Redis实现一个账号只能登录一个设备
2022/04/19 Redis