首页
所有分类
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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 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
德生G88(1) SRF-22W(1) SRF-40W(1) AE3805(1) PR-D3L(1) ICF-F10(1) 德生1994(1) ICF-SW100(1) 纸巾盒(1) CPU(2)
You might like
一个好用的PHP验证码类实例分享
2013/12/27 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JavaScript运动框架 链式运动到完美运动（五）
2017/05/18 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
JS计算两个数组的交集、差集、并集、补集（多种实现方式）
2019/05/21 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
哄娃神器4moms商店：美国婴童用品品牌
2019/03/07 全球购物
英国DIY汽车维修配件网站：DIY Car Service Parts
2019/08/30 全球购物
Skyscanner香港：机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
春节活动策划方案
2014/01/24 职场文书
四年级下册教学反思
2014/02/01 职场文书
大学社团计划书
2014/05/01 职场文书
启动仪式策划方案
2014/06/14 职场文书
责任书范本
2014/08/25 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动个人对照检查材料（教师）
2014/11/04 职场文书
安全承诺书
2015/01/19 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
主持人大赛开场白
2015/05/29 职场文书
校园安全教育心得体会
2016/01/15 职场文书