大家都在搜：
开源软件
技术教程
源码分享
网站模版
当前位置： 首页>技术教程>网页制作>CSS>正文

CSS多列显示实现瀑布流

来源：爱站网时间：2018-12-06编辑：网友分享
瀑布流貌似现在比较火，看了些网站的瀑布流的布局感觉蛮不错的，所以最近用CSS3试着研究了一番，接下来就给大家来分享一下CSS多列显示实现瀑布流效果。

瀑布流貌似现在比较火，看了些网站的瀑布流的布局感觉蛮不错的，所以最近用CSS3试着研究了一番，接下来就给大家来分享一下CSS多列显示实现瀑布流效果。

CSS Code复制内容到剪贴板
    css">
  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. /span>>
    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">
    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>
    36.  
    37.  
    38. .container{
    39. /*需要适配浏览器，这里因为只用了火狐浏览器，就不再写其他的适配代码了*/
    40. column-width: 300px;/* 给图片区域设定宽度，高度自适应 */
    41. -moz-column-width: 300px;
    42.  
    43. -moz-column-gap: 5px;
    44. column-gap: 5px;
    45. /*column-count: 4;*/
    46. /*-moz-column-count: 4;*/
    47.  
    48.  
    49. }
    50. .container.div{
    51. width: 250px;
    52. margin:5px;
    53. }
    54. .container p{
    55. text-align: center;
    56. }

    以上就是CSS多列显示实现瀑布流的全部内容，希望对大家的学习有所帮助，更多精彩内容，尽在https://js.aizhan.com。

    上一篇：CSS特殊性、继承和层叠

    下一篇：CSS的content属性使用教程

    您可能感兴趣的文章

    相关阅读

    查看更多 >

    热门软件源码

    最新软件源码下载

    ©2009-2024Aizhan.COM粤ICP备2022129511号

    公司简介|联系方法|招聘信息|广告服务|友情链接|帮助中心|意见反馈