商品名称等信息。

 <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;
}

效果:

商品显示

最后修改:2022 年 08 月 23 日
如果觉得我的文章对你有用,请随意赞赏