商品名称等信息。
<div class="goodsInfo">
<div><img src="./uploads/pic.png" alt=""></div>
<div class="goodsName">
<p>红外线体温测量仪</p>
<p>领取优惠券立省百分之百...</p>
<div class="choose">白色 体温测量仪</div>
<div class=""><span class="price">¥266</span> <del>¥299</del></div>
</div>
<div><i class="iconfont icon-x"></i>1</div>
</div>
样式:
/* 商品信息模块 */
/* 整个盒子开启flex圣杯布局 */
.goodsInfo{
display: flex;
justify-content: space-between;
}
/* 商品图片部分 */
.goodsInfo div:nth-child(1){
width: 100px;
height: 100px;
}
/* 让图片适应盒子宽高 */
.goodsInfo div:nth-child(1) img{
width: 100%;
height: 100%;
}
/* 右侧的商品数量 */
.goodsInfo>div:nth-child(3){
width: 30px;
text-align: right;
}
/* 中间的商品名称信息开启宽度自适应 */
.goodsInfo div:nth-child(2){
flex: 1;
}
.goodsInfo .goodsName p:nth-child(2){
margin: 7px 0;
}
.goodsName{
margin-left: 10px;
}
/* 中间的商品名称信息选择 */
.goodsInfo .choose{
background-color: #f7f7f7;
display: inline-block;
padding: 5px;
border-radius: 3px;
font-size: 10px;
color: #868686;
margin-bottom: 7px;
}
/* 价格信息 */
.goodsName .price{
color: brown;
font-size: 20px;
margin-right: 10px;
}
效果: