首页
所有分类
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中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5中 media（播放器）的api使用指南
Dec 26 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
html粘性页脚的具体使用
Jan 18 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
matplotlib(7) ipyvizzu(1) 窗口函数(3) 阿里云(6) 排名(1) 条形图(1) 分析统计(1) 可视化动图(1) 数据同步(1) redis shake(1)
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
深入理解JavaScript系列（45）：代码复用模式（避免篇）详解
2015/03/04 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
hovertree插件实现二级树形菜单（简单实用）
2016/12/28 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python实现日常记账本小程序
2018/03/10 Python
python实现猜单词小游戏
2020/05/22 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python坐标线性插值应用实现
2019/11/13 Python
了解一下python内建模块collections
2020/09/07 Python
银行竞聘演讲稿
2014/05/16 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年社区工作总结
2014/11/18 职场文书
单位介绍信格式范文
2015/05/04 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle