CSS3应用两列制做瀑布流

日期：2021-03-18 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

先来看来1看CSS3怎样完成两列显示信息，编码以下

CSS Code拷贝內容到剪贴板
  1. <div class="div1">   
  2. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  3. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  4. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  5. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  6. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  7. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  8. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  9. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  10. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  11. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  12. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  13. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  14. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  15. 大伙儿好，这里是用来站位的文本 大伙儿好，这里是用来站位的文本   
  16. </div>   
  17.   
  18. .div1{   
  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应用两列制做瀑布流：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF⑻">
  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>这里是商品叙述</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. }

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。

上一篇：规范企业网站建设 返回下一篇：没有了