微信小程序商城15天从零实战视频课程-知识点-1行3列图片的布局

wxml代码

<!--最新产品-1行3列图片-不带文字-->
<view class="cps">
  <view class="cp-item" >
     <image src='/img/cp01.jpg' class="cp-image"/>
  </view>  
  <view class="cp-item" >
     <image src='/img/cp02.jpg' class="cp-image"/>
  </view> 
  <view class="cp-item" >
     <image src='/img/cp03.jpg' class="cp-image"/>
  </view>      
</view>

-----------------------------------
<!--最新产品-1行3列图片-带文字-->
<view class="cps">
  <view class="cp-item" >
     <image src='/img/cp01.jpg' class="cp-image"/><text>产品名称01</text><text>￥：25.6</text>
  </view>  
  <view class="cp-item" >
     <image src='/img/cp02.jpg' class="cp-image"/><text>产品名称02</text><text>￥：1528</text>
  </view> 
  <view class="cp-item" >
     <image src='/img/cp03.jpg' class="cp-image"/><text>产品名称03</text><text>￥：679</text>
  </view>   
  <view class="cp-item" >
     <image src='/img/cp01.jpg' class="cp-image"/><text>产品名称01</text><text>￥：25.6</text>
  </view>  
  <view class="cp-item" >
     <image src='/img/cp02.jpg' class="cp-image"/><text>产品名称02</text><text>￥：1528</text>
  </view> 
  <view class="cp-item" >
     <image src='/img/cp03.jpg' class="cp-image"/><text>产品名称03</text><text>￥：679</text>
  </view>        
</view>

wxss代码

/*最新产品-1行3列图片*/
.cps {
  display: flex; flex-wrap:  wrap;
}
.cp-item {
  width: 32%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5rpx;
}

.cp-item .cp-image {
  width: 210rpx;
  height: 210rpx; 
}

.cp-item text {
  padding-top: 10rpx;
  font-size: 25rpx; text-align: left;
  width: 100%;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437