首页
所有分类
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的@media来编写响应式的页面
Nov 01 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
CSS3 画基本图形，圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
PL450(1) BCL3000(2) PL550(1) H-501(1) ICF-SW07(1) 低放电路(1) PL990(2) ICF-SW7600(1) S500(1) S700(1)
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
ECMA5数组的新增方法有哪些及forEach（）模仿实现
2015/11/03 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python 魔法函数实例及解析
2019/09/25 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Lookfantastic香港官网：英国知名美妆购物网站
2018/06/19 全球购物
Lime Crime官网：美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
应用英语专业自荐信
2014/01/26 职场文书
奥运会口号
2014/06/13 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
授权委托书
2014/09/17 职场文书
员工教育培训协议书
2014/09/27 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
python基础之文件操作
2021/10/24 Python
NoSQL优缺点与ＭongoDB数据库简介
2022/06/05 MongoDB
Golang Web 框架Iris安装部署
2022/08/14 Python