代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } .reco-box { width: 1190px; height: auto; margin: 0 auto; /* border:1px solid #ccc; */ margin-top: 50px; border-width:0px 1px 1px 0px; border-style: solid; border-color:#ccc; } .item { float: left; width: calc(12.5% - 1px); height: 100%; /* 加边框内减 */ border-width:1px 0px 0px 1px; border-style: solid; border-color:#ccc; } .item a { display: block; } .item a img { width: 100%; height: 100%; } .clearfix::after { content: ''; display: block; clear:both; } </style> </head> <body> <div class="reco-box clearfix"> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div> </div> </body> </html>
效果图
