设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
楼主: ttx9n

[CSS] CSS3使用多列制作瀑布流

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-5-10 11:57:39 | 显示全部楼层 |阅读模式
这篇文章主要为大家详细介绍了CSS3使用多列制作瀑布流的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先来来看一看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使用多列制作瀑布流：

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

相关帖子
回复

使用道具 举报

9jduu05

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-16 23:13:31 | 显示全部楼层
问问问企鹅哇哇哇哇哇
回复 支持 反对

使用道具 举报

123456

6

主题

1万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2022-9-7 18:32:55 | 显示全部楼层
很好，谢谢分享
回复 支持 反对

使用道具 举报

额呵呵

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-3-24 11:17:56 | 显示全部楼层
你们谁看了弄洒了可能
回复 支持 反对

使用道具 举报

额呵呵

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-7-12 18:45:28 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

bp5jgbcnt

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2024-7-23 20:25:54 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

gc4hg

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2024-7-26 05:08:08 | 显示全部楼层
撒房产税陈飞飞
回复 支持 反对

使用道具 举报

95nd4ba

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-8-8 21:40:29 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

dsfd

20

主题

6068

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2024-8-26 18:04:07 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

qzdhcgs

0

主题

2万

回帖

115

积分

注册会员

Rank: 2

积分
115
发表于 2024-9-12 07:57:35 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 06:31 , Processed in 0.071803 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表