css实现商品卡片布局方式：
在移动端电商页面中，会经常用到商品卡片这种布局方式，像这样： 下面就用html5实现这种样式：
html代码：
<div
class="item-card">
<img
:src
="mainPic" @click
="gotopic(itemLink)" />
<div
class="item-right">
<span
>{{title
}}</span
>
<div
class="item-price">
<span
>
<font color
="red">￥
{{actualPrice
}}</font
> 
; 
;
<s style
="color:#999">￥
{{originalPrice
}}</s
>
</span
>
<span
>
<font color
="#999">{{monthSales
}}</font
>
</span
>
</div
>
<span @click
="gotopic(coupouLink)" class="lingquan">领券
</span
>
</div
>
</div
>
css：
.item-card {
border-top: 0.3px solid #999
;
box-sizing: border-box
;
display: flex
;
flex-direction: row
;
justify-content: space-between
;
margin: 5px 0
;
}
.item-card img {
width: 30%
;
}
.item-right {
display: flex
;
flex-direction: column
;
justify-content: space-around
;
}
.item-price {
display: flex
;
justify-content: space-between
;
}
出来是这种样式：
