CSS3使用多列制作瀑布流 - 网站

CSS3使用多列制作瀑布流

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2021-10-16 22:36 · 阅读：3109

这篇文章主要为大家详细介绍了CSS3使用多列制作瀑布流的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

CSS Code复制内容到剪贴板
  1. "div1">   
  2. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  3. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  4. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  5. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  6. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  7. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  8. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  9. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  10. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  11. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  12. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  13. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  14. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  15. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
  
  •   
  • .div1{   
  • /*分列的数量*/  
  • column-count: 4;   
  • -moz-column-count:4;   
  • /*每一个分列中间的距离*/  
  • -moz-column-gap: 70px;   
  • column-gap: 70px;   
  • /*每两个列之间的线和线的颜色*/  
  • column-rule: 5px outset #FF0000;   
  • -moz-column-rule: 5px outset #FF0000;   
  • }   
  •   

    • 效果图：

    CSS3使用多列制作瀑布流：

    XML/HTML Code复制内容到剪贴板
    1. >
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Titletitle>
    6. <link href="countstyle.css" type="text/css" rel="stylesheet">
    7. head>
    8. <body>
    9. <div class="container">
    11. <div><img src="img/1.png-600">
    12. <p>这里是产品描述p>div>
    13. <div><img src="img/2.png-600">div>
    14. <div><img src="img/3.png-600">div>
    15. <div><img src="img/4.png-600">
    16. <p>这里是产品描述p>div>
    17. <div><img src="img/5.png-600">div>
    18. <div><img src="img/6.png-600">div>
    19. <div><img src="img/7.png-600">
    20. <p>这里是产品描述p>div>
    21. <div><img src="img/8.png-600">div>
    22. <div><img src="img/9.png-600">div>
    23. <div><img src="img/1.png-600">div>
    24. <div><img src="img/2.png-600">div>
    25. <div><img src="img/3.png-600">div>
    26. <div><img src="img/4.png-600">
    27. <p>这里是产品描述p>div>
    28. <div><img src="img/5.png-600">div>
    29. <div><img src="img/6.png-600">div>
    30. <div><img src="img/7.png-600">div>
    31. <div><img src="img/8.png-600">div>
    32. <div><img src="img/9.png-600">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

    相关文章

    css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下

    CSS3几种实现子容器水平垂直居中的方法

    本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下

    css3实现文字首尾衔接跑马灯的示例代码

    这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS的浮动及清除浮动的5种方法介绍

    这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    返回分类 返回首页