标签：container 效果 column 250px 照片 width 瀑布 5px webkit
效果展示
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>风景</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="container"> 10 <div><img src="image/1.jpg"> 11 <p>添加一个标签</p></div> 12 <div><img src="image/2.jpg"></div> 13 <div><img src="image/3.jpg"></div> 14 <div><img src="image/4.jpg"></div> 15 <div><img src="image/5.jpg"></div> 16 <div><img src="image/6.jpg"></div> 17 <div><img src="image/7.jpg"></div> 18 <div><img src="image/8.jpg"></div> 19 <div><img src="image/9.jpg"></div> 20 <div><img src="image/1.jpg"></div> 21 <div><img src="image/2.jpg"></div> 22 <div><img src="image/3.jpg"></div> 23 <div><img src="image/4.jpg"></div> 24 <div><img src="image/5.jpg"></div> 25 <div><img src="image/6.jpg"></div> 26 <div><img src="image/7.jpg"></div> 27 <div><img src="image/8.jpg"></div> 28 <div><img src="image/9.jpg"></div> 29 <div><img src="image/1.jpg"></div> 30 <div><img src="image/2.jpg"></div> 31 <div><img src="image/3.jpg"></div> 32 <div><img src="image/4.jpg"></div> 33 <div><img src="image/5.jpg"></div> 34 <div><img src="image/6.jpg"></div> 35 <div><img src="image/7.jpg"></div> 36 <div><img src="image/8.jpg"></div> 37 <div><img src="image/9.jpg"></div> 38 <div><img src="image/1.jpg"></div> 39 <div><img src="image/2.jpg"></div> 40 <div><img src="image/3.jpg"></div> 41 <div><img src="image/4.jpg"></div> 42 <div><img src="image/5.jpg"></div> 43 <div><img src="image/6.jpg"></div> 44 <div><img src="image/7.jpg"></div> 45 <div><img src="image/8.jpg"></div> 46 <div><img src="image/9.jpg"></div> 47 <div><img src="image/1.jpg"></div> 48 <div><img src="image/2.jpg"></div> 49 <div><img src="image/3.jpg"></div> 50 <div><img src="image/4.jpg"></div> 51 <div><img src="image/5.jpg"></div> 52 <div><img src="image/6.jpg"></div> 53 <div><img src="image/7.jpg"></div> 54 <div><img src="image/8.jpg"></div> 55 <div><img src="image/9.jpg"></div> 56 <div><img src="image/1.jpg"></div> 57 <div><img src="image/2.jpg"></div> 58 <div><img src="image/3.jpg"></div> 59 <div><img src="image/4.jpg"></div> 60 <div><img src="image/5.jpg"></div> 61 <div><img src="image/6.jpg"></div> 62 <div><img src="image/7.jpg"></div> 63 <div><img src="image/8.jpg"></div> 64 <div><img src="image/9.jpg"></div> 65 <div><img src="image/1.jpg"></div> 66 <div><img src="image/2.jpg"></div> 67 <div><img src="image/3.jpg"></div> 68 <div><img src="image/4.jpg"></div> 69 <div><img src="image/5.jpg"></div> 70 <div><img src="image/6.jpg"></div> 71 <div><img src="image/7.jpg"></div> 72 <div><img src="image/8.jpg"></div> 73 <div><img src="image/9.jpg"></div> 74 <div><img src="image/1.jpg"></div> 75 <div><img src="image/2.jpg"></div> 76 <div><img src="image/3.jpg"></div> 77 <div><img src="image/4.jpg"></div> 78 <div><img src="image/5.jpg"></div> 79 <div><img src="image/6.jpg"></div> 80 <div><img src="image/7.jpg"></div> 81 <div><img src="image/8.jpg"></div> 82 <div><img src="image/9.jpg"></div> 83 <div><img src="image/1.jpg"></div> 84 <div><img src="image/2.jpg"></div> 85 <div><img src="image/3.jpg"></div> 86 <div><img src="image/4.jpg"></div> 87 <div><img src="image/5.jpg"></div> 88 <div><img src="image/6.jpg"></div> 89 <div><img src="image/7.jpg"></div> 90 <div><img src="image/8.jpg"></div> 91 <div><img src="image/9.jpg"></div> 92 <div><img src="image/1.jpg"></div> 93 <div><img src="image/2.jpg"></div> 94 <div><img src="image/3.jpg"></div> 95 <div><img src="image/4.jpg"></div> 96 <div><img src="image/5.jpg"></div> 97 <div><img src="image/6.jpg"></div> 98 <div><img src="image/7.jpg"></div> 99 <div><img src="image/8.jpg"></div> 100 <div><img src="image/9.jpg"></div> 101 <div><img src="image/1.jpg"></div> 102 <div><img src="image/2.jpg"></div> 103 <div><img src="image/3.jpg"></div> 104 <div><img src="image/4.jpg"></div> 105 <div><img src="image/5.jpg"></div> 106 <div><img src="image/6.jpg"></div> 107 <div><img src="image/7.jpg"></div> 108 <div><img src="image/8.jpg"></div> 109 <div><img src="image/9.jpg"></div> 110 </div> 111 </body> 112 </html>
css
1 .container{
2 column-width: 250px;
3 -webkit-column-width: 250px;
4 column-gap: 5px;
5 -webkit-column-gap: 5px;
6 }
7 .container div img{
8 width: 250px;
9 }
10 .container div{
11 width: 250px;
12 margin: 5px 0;
13 }
标签：container,效果,column,250px,照片,width,瀑布,5px,webkit 来源： https://www.cnblogs.com/zuzhuangmengxiang/p/12539078.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。