1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         .reco-box {
  13.             width: 1190px;
  14.             height: auto;
  15.             margin: 0 auto;
  16.             /* border:1px solid #ccc; */
  17.             margin-top: 50px;
  18.             border-width:0px 1px 1px 0px;
  19.             border-style: solid;
  20.             border-color:#ccc;
  21.  
  22.         }
  23.         .item {
  24.             float: left;
  25.             width: calc(12.5% - 1px);
  26.             height: 100%;
  27.             /* 加边框内减 */
  28.             border-width:1px 0px 0px 1px;
  29.             border-style: solid;
  30.             border-color:#ccc;
  31.         }
  32.         .item a {
  33.             display: block;
  34.         }
  35.         .item a img {
  36.             width: 100%;
  37.             height: 100%;
  38.         }
  39.         .clearfix::after {
  40.             content: \'\';
  41.             display: block;
  42.             clear:both;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="reco-box clearfix">
  48.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  49.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  50.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  51.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  52.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  53.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  54.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  55.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  56.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  57.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  58.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  59.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  60.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  61.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  62.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  63.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  64.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  65.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  66.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  67.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  68.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  69.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  70.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  71.         <div class="item"><a href=""><img src="./image/dog.jpg" alt=""></a></div>
  72.         
  73.      </div>
  74. </body>
  75. </html>

 

 

版权声明：本文为shihaiying原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/shihaiying/p/13503469.html