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>