实现商品左右布局，自动往下排列
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .center { 6 display:flex; 7 flex-wrap: wrap; 8 margin: auto; 9 width: 100vw; 10 border: 1px solid #73AD21; 11 padding: 5px; 12 } 13 .row{ 14 width: 49vw; 15 background-color:red; 16 border: 1px solid #333D21; 17 padding: 10px 0px; 18 margin:2px; 19 } 20 .row_img{ 21 width:90%; 22 height:100px; 23 text-align:center; 24 line-height:100px; 25 margin: auto; 26 background-color:yellow; 27 border: 1px solid #333D21; 28 } 29 .row_title{ 30 width:90%; 31 margin: auto; 32 background-color:white; 33 border: 1px solid #333D21; 34 } 35 .row_price{ 36 display:flex; 37 width:90%; 38 height:30px; 39 font-size:18px; 40 margin: auto; 41 background-color:white; 42 border: 1px solid #333D21; 43 } 44 .row_price_left{ 45 width:20vw; 46 background: #f2f2f2; 47 border-radius: 3px; 48 color: red; 49 font-size: 20px; 50 font-weight: bold; 51 padding: 5px 10px; 52 text-align: center; 53 } 54 .row_price_right{ 55 width:80vw; 56 text-decoration: line-through; 57 color: gray; 58 text-align:left; 59 margin:auto; 60 } 61 </style> 62 </head> 63 <body> 64 <div class="center"> 65 <div class="row"> 66 <div class='row_img'>图片</div> 67 <div class='row_title'>商品名称</div> 68 <div class="row_price"> 69 <div class="row_price_left">￥888</div> 70 <div class="row_price_right">￥1024</div> 71 </div> 72 </div> 73 <div class="row"> 74 <div class='row_img'>图片</div> 75 <div class='row_title'>商品名称</div> 76 <div class="row_price"> 77 <div class="row_price_left">￥888</div> 78 <div class="row_price_right">￥1024</div> 79 </div> 80 </div> 81 <div class="row"> 82 <div class='row_img'>图片</div> 83 <div class='row_title'>商品名称</div> 84 <div class="row_price"> 85 <div class="row_price_left">￥888</div> 86 <div class="row_price_right">￥1024</div> 87 </div> 88 </div> 89 <div class="row"> 90 <div class='row_img'>图片</div> 91 <div class='row_title'>商品名称</div> 92 <div class="row_price"> 93 <div class="row_price_left">￥888</div> 94 <div class="row_price_right">￥1024</div> 95 </div> 96 </div> 97 </div> 98 99 </body> 100 </html>
效果图：
