搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3如何使用多列制作瀑布流

发布时间：2023-06-02 11:18:03 来源：网络
.
近来看到下面这篇感觉很不错，文章主要给大家介绍了CSS3如何使用多列制作瀑布流的相关资料，需要的朋友可以参考下

先来来看一看CSS3如何实现多列显示，代码如下

CSS Code复制内容到剪贴板
  1. <divclass="div1">
  2. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  3. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  4. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  5. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  6. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  7. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  8. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  9. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  10. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  11. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  12. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  13. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  14. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  15. 大家好，这里是用来站位的文字大家好，这里是用来站位的文字
  16. </div>
  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:5pxoutset#FF0000;
  27. -moz-column-rule:5pxoutset#FF0000;
  28. }

效果图：

CSS3使用多列制作瀑布流：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link rel="nofollow noopener noreferrer" 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. }

以上就是本文的全部内容，希望对大家的学习有所帮助。

以下您可能有感兴趣的文章:
标签：
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图