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:5pxoutset#FF0000;
  • -moz-column-rule:5pxoutset#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>
    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. }

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