首页
所有分类
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选择器的研究(详解)
Sep 16 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
原理(1) 单管机(1) BOSE(2) 音箱(1) 春雷3P7(1) 探测器(1) 收信机(3) 耳机(1) ICF-2010(1) 电路(15)
You might like
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP 验证码的实现代码
2011/07/17 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php实现购物车产品删除功能（2）
2020/07/23 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python日志模块logging简介
2015/04/13 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
世界最大域名注册商：GoDaddy
2016/07/24 全球购物
意大利在线眼镜精品店：Ottica Lipari
2019/11/11 全球购物
2019年幼儿园管理条例范本！
2019/07/17 职场文书