首页
所有分类
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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 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
mysqldump(1) xps(1) sock(2) Stater(1) XPathParser(1) macos(1) csgo(1) sentinel(1) protocol(1) ACID(1)
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
php中的时间处理
2006/10/09 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php google或baidu分页代码
2009/11/26 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python将多个文本文件合并为一个文本的代码（便于搜索）
2011/03/13 Python
python中的五种异常处理机制介绍
2014/09/02 Python
详解Python中with语句的用法
2015/04/15 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
商务英语求职自荐信范文
2013/12/24 职场文书
怀念母亲教学反思
2014/04/28 职场文书
大学生个人求职信
2014/06/02 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
优质服务心得体会（共4篇）
2016/01/22 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书