首页
所有分类
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的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5进阶段内联标签汇总（小篇）
Jul 13 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
AmazeUI折叠式卡片布局，整合内容列表、表格组件实现
Aug 20 HTML / CSS
纯html+css实现Element loading效果
Aug 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
广告词(105) 聘任书(31) 承诺书(369) 建议书(203) 责任书(145) 主持词(345) 竞聘书(31) 意向书(73) 决心书(42) 活动总结(790)
You might like
php时间戳转换的示例
2014/03/31 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
JSON是什么？有哪些优点？JSON和XML的区别？
2019/04/29 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
python 判断一个进程是否存在
2009/04/09 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python使用selenium登录QQ邮箱（附带滑动解锁）
2019/01/23 Python
Django实现学员管理系统
2019/02/26 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python @property使用方法解析
2019/09/17 Python
python生成特定分布数的实例
2019/12/05 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
日本最新流行服饰网购：Nissen
2016/07/24 全球购物
LivingSocial爱尔兰：爱尔兰本地优惠
2018/08/10 全球购物
颇特女士香港官网：NET-A-PORTER香港
2021/03/08 全球购物
如何查找网页漏洞
2016/06/22 面试题
教师节活动主持词
2014/04/02 职场文书
员工给公司的建议书
2019/06/24 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技
centos7安装mysql5.7经验记录
2022/05/02 Servers
Redis唯一ID生成器的实现
2022/07/07 Redis