图片缝隙处理
作者：互联网
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>
标签：img,处理,缝隙,two,height,800px,图片 来源： https://www.cnblogs.com/yuanxiangguang/p/11321060.html