首页
所有分类
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使用技巧5个
Apr 02 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 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
索引(8) 备份(2) 索尼ICF-36(1) IP(1) 限速(1) 全局锁(1) 德生2P3(1) 数据库卡死(1) update(2) tcp/ip(1)
You might like
学习PHP session的传递方式
2016/06/15 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
什么是事务？为什么需要事务？
2012/01/09 面试题
自我评价200字分享
2013/12/17 职场文书
探矿工程师自荐信
2014/01/24 职场文书
委托公证书范本
2014/04/03 职场文书
老公给老婆的保证书
2014/04/28 职场文书
教师工作总结范文2014
2014/11/10 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
党员剖析材料范文
2014/12/18 职场文书
公司出纳岗位职责
2015/03/31 职场文书
答辩状格式范本
2015/05/22 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
golang slice元素去重操作
2021/04/30 Golang
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
APP界面设计技巧和注意事项
2022/04/29 杂记