您现在的位置是：网站首页> 编程资料编程资料

CSS3使用多列制作瀑布流_css3_CSS_网页制作_

2021-09-13 1259人已围观

简介 这篇文章主要为大家详细介绍了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. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Titletitle>
    6. <linkhref="countstyle.css"type="text/css"rel="stylesheet">
    7. head>
    8. <body>
    9. <divclass="container">
    11. <div><imgsrc="img/1.png">
    12. <p>这里是产品描述p>div>
    13. <div><imgsrc="img/2.png">div>
    14. <div><imgsrc="img/3.png">div>
    15. <div><imgsrc="img/4.png">
    16. <p>这里是产品描述p>div>
    17. <div><imgsrc="img/5.png">div>
    18. <div><imgsrc="img/6.png">div>
    19. <div><imgsrc="img/7.png">
    20. <p>这里是产品描述p>div>
    21. <div><imgsrc="img/8.png">div>
    22. <div><imgsrc="img/9.png">div>
    23. <div><imgsrc="img/1.png">div>
    24. <div><imgsrc="img/2.png">div>
    25. <div><imgsrc="img/3.png">div>
    26. <div><imgsrc="img/4.png">
    27. <p>这里是产品描述p>div>
    28. <div><imgsrc="img/5.png">div>
    29. <div><imgsrc="img/6.png">div>
    30. <div><imgsrc="img/7.png">div>
    31. <div><imgsrc="img/8.png">div>
    32. <div><imgsrc="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中border-radius属性设定圆角的使用技巧_css3_CSS_网页制作_

    下一篇：Div+CSS仿微信公众平台登录页面_Div+CSS教程_CSS_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网