CSS多列显示实现瀑布流

作者:kgmucom   在线用户:12
风之恋奇迹私服技术网是一家提供最新互联网编程技术网站

瀑布流貌似现在比较火,看了些网站的瀑布流的布局感觉蛮不错的,所以最近用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;   
  • }   
  •   
  • 效果图:

    CSS多列显示实现瀑布流-第1张图片

    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">
    10. div>img src="img/1.png">
    11. p>这里是产品描述p>div>
    12. div>img src="img/2.png">div>
    13. div>img src="img/3.png">div>
    14. div>img src="img/4.png">
    15. p>这里是产品描述p>div>
    16. div>img src="img/5.png">div>
    17. div>img src="img/6.png">div>
    18. div>img src="img/7.png">
    19. p>这里是产品描述p>div>
    20. div>img src="img/8.png">div>
    21. div>img src="img/9.png">div>
    22. div>img src="img/1.png">div>
    23. div>img src="img/2.png">div>
    24. div>img src="img/3.png">div>
    25. div>img src="img/4.png">
    26. p>这里是产品描述p>div>
    27. div>img src="img/5.png">div>
    28. div>img src="img/6.png">div>
    29. div>img src="img/7.png">div>
    30. div>img src="img/8.png">div>
    31. div>img src="img/9.png">div>
    32. div>
    33. body>
    34. html>
    35.  
    36.  
    37. .container{
    38. /*需要适配浏览器,这里因为只用了火狐浏览器,就不再写其他的适配代码了*/
    39. column-width: 300px;/* 给图片区域设定宽度,高度自适应 */
    40. -moz-column-width: 300px;
    41.  
    42. -moz-column-gap: 5px;
    43. column-gap: 5px;
    44. /*column-count: 4;*/
    45. /*-moz-column-count: 4;*/
    46.  
    47.  
    48. }
    49. .container.div{
    50. width: 250px;
    51. margin:5px;
    52. }
    53. .container p{
    54. text-align: center;
    55. }

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

    提供最全面的奇迹sf开服版本和最新的奇迹私服开服技术信息,奇迹私服文库让每一位奇迹私服玩家找到自己需要的版本技术文章

    关键词: 奇迹私服奇迹私服技术CSS

    上一篇:CSS中指定值、初始值和计算值的教程

    下一篇:区块链将颠覆整个社会,我们任重而道远

    请发表您的评论