1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>图片缝隙处理</title> 8 <style> 9 .one, 10 .two { 11 width: 800px; 12 height: 800px; 13 background-color: aliceblue; 14 } 15 16 .one img { 17 float: left; 18 } 19 20 .two div { 21 height: 218px; 22 } 23 24 .two img { 25 /* 转换成块级标签 */ 26 /* display: block; */ 27 vertical-align: top; 28 } 29 </style> 30 </head> 31 32 <body> 33 <section class="one"> 34 <img src="images/1.jpg" height="218" width="167" alt="" /> 35 <img src="images/2.jpg" height="218" width="167" alt="" /> 36 <img src="images/3.jpg" height="218" width="167" alt="" /> 37 38 </section> 39 <br /> 40 <br /> 41 <hr /> 42 <br /> 43 <br /> 44 45 <section class="two"> 46 <div><img src="images/1.jpg" height="218" width="167" alt="" /></div> 47 <div><img src="images/2.jpg" height="218" width="167" alt="" /></div> 48 <div><img src="images/3.jpg" height="218" width="167" alt="" /></div> 49 </section> 50 </body> 51 52 </html>
