亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3使用多列制作瀑布流

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

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

CSS Code復制內(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復制內(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. /*需要適配瀏覽器，這里因為只用了火狐瀏覽器，就不再寫其他的適配代碼了*/
  40. column-width: 300px;/* 給圖片區(qū)域設定寬度，高度自適應 */
  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)容，希望對大家的學習有所幫助。

相關(guān)文章

最新評論