首页
所有分类
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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5中 media（播放器）的api使用指南
Dec 26 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
鸿蒙3.0(1) 蓝牙耳机(1) 华为(1) 鸿蒙(2) xhunter1.sys(1) RustDesk(1) HarmonyOS(1) Debian(1) 蓝牙(1) 虚拟键盘(1)
You might like
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python类继承用法实例分析
2015/05/27 Python
Python分支结构（switch）操作简介
2018/01/17 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
美国最便宜的旅游网站：CheapTickets
2017/07/09 全球购物
入团者的自我评价分享
2013/12/02 职场文书
供货协议书范本
2014/04/22 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
学习十八大的感悟
2015/08/11 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
python playwrigh框架入门安装使用
2022/07/23 Python