实现商品左右布局，自动往下排列
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>
效果图：
标签：左右,width,color,border,布局,商品,auto,margin,row From： https://www.cnblogs.com/mxx520/p/17819074.html