首页
所有分类
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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
Html5同时支持多端sdk的小技巧
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
百度地图(1) 表约束(2) Slave(1) transaction(1) 封装(1) caddy(1) variables(1) ESXI(1) Master(1) 主从复制(1)
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python中属性和描述符的正确使用
2016/08/23 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python实现简单五子棋游戏
2019/06/18 Python
Python银行系统实战源码
2019/10/25 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
介绍一下Mysql的存储引擎
2015/02/12 面试题
党员个人思想汇报
2013/12/28 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
家长会后的感想
2015/08/11 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
详解python的异常捕获
2022/03/03 Python