欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3使用多列制作瀑布流

  發(fā)布時間：2016-05-10 11:57:39   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了CSS3使用多列制作瀑布流的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先來來看一看CSS3如何實(shí)現(xiàn)多列顯示，代碼如下

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class="div1">   
  2. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  3. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  4. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  5. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  6. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  7. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  8. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  9. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  10. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  11. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  12. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  13. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  14. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  15. 大家好，這里是用來站位的文字 大家好，這里是用來站位的文字   
  16. </div>   
  17.   
  18. .div1{   
  19. /*分列的數(shù)量*/  
  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使用多列制作瀑布流：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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. <div class="container">
  10. <!--盡量在做圖片的時候使其寬度相等-->
  11. <div><img src="img/1.png">
  12. <p>這里是產(chǎn)品描述</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>這里是產(chǎn)品描述</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>這里是產(chǎn)品描述</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>這里是產(chǎn)品描述</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. /*需要適配瀏覽器，這里因?yàn)橹挥昧嘶鸷鼮g覽器，就不再寫其他的適配代碼了*/
  40. column-width: 300px;/* 給圖片區(qū)域設(shè)定寬度，高度自適應(yīng) */
  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. }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論