您的位置：首页 > Web前端 > > 正文

css3浮动教程（CSS3使用多列制作瀑布流）

更多 时间：2022-01-25 00:11:54 类别：Web前端 浏览量：1872

css3浮动教程

CSS3使用多列制作瀑布流

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

  • CSS Code复制内容到剪贴板
    1. <li class="li1">   
    2. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    3. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    4. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    5. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    6. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    7. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    8. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    9. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    10. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    11. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    12. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    13. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    14. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    15. 大家好，这里是用来站位的文字 大家好，这里是用来站位的文字   
    16. </li>   
    17.   
    18. .li1{   
    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浮动教程（CSS3使用多列制作瀑布流）

    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. <li class="container">
    10. <!--尽量在做图片的时候使其宽度相等-->
    11. <li><img src="img/1.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />>
    12. <p>这里是产品描述</p></li>
    13. <li><img src="img/2.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    14. <li><img src="img/3.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    15. <li><img src="img/4.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />>
    16. <p>这里是产品描述</p></li>
    17. <li><img src="img/5.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    18. <li><img src="img/6.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    19. <li><img src="img/7.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />>
    20. <p>这里是产品描述</p></li>
    21. <li><img src="img/8.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    22. <li><img src="img/9.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    23. <li><img src="img/1.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    24. <li><img src="img/2.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    25. <li><img src="img/3.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    26. <li><img src="img/4.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />>
    27. <p>这里是产品描述</p></li>
    28. <li><img src="img/5.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    29. <li><img src="img/6.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    30. <li><img src="img/7.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    31. <li><img src="img/8.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    32. <li><img src="img/9.jpg" alt="css3浮动教程（CSS3使用多列制作瀑布流）" border="0" />></li>
    33. </li>
    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.li{
    51. width: 250px;
    52. margin:5px;
    53. }
    54. .container p{
    55. text-align: center;
    56. }

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

    标签：多列 瀑布流 CSS3
  • 上一篇：宝塔面板里面的文件编辑怎么点开（宝塔面板可以上传多大文件?怎么设置文件大小?）
  • 下一篇：iis7如何使用（IIS7的应用程序池详细解析）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利