首页
所有分类
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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
让IE6支持css3，让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
捷克购物网站(26) 阿联酋购物网站(26) 卡塔尔购物网站(3) 斯洛伐克购物网站(7) 新西兰购物网站(42) 土耳其购物网站(10) 智利购物网站(5) 波兰购物网站(52) 奥地利购物网站(28) 沙特阿拉伯购物网站(9)
You might like
如何获得PHP相关资料
2006/10/09 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
JavaScript触发器详解
2007/03/10 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
简单实现js浮动框
2016/12/13 Javascript
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
2019/11/21 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
详解Python IO编程
2020/07/24 Python
Python pymsql模块的使用
2020/09/07 Python
python动态规划算法实例详解
2020/11/22 Python
俄罗斯护发和专业化妆品购物网站：Hihair
2019/09/28 全球购物
俄罗斯最大的在线手表商店：Bestwatch.ru
2020/01/11 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
考试保密承诺书
2014/08/30 职场文书
学生会辞职信
2015/03/02 职场文书
中秋节英文祝福语句（14句）
2019/09/11 职场文书