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

wxml代码

  <view class="wx-cells">
      <view class="wx-cell">
        <image class="wx-cell-icon"src="/images/news.png"></image>
        <text class="wx-cell-text">08/08 微信小程序上线通知</text>
        <image class="wx-cell-arrow" src="/images/right.png"></image>
      </view>
  </view>

wxss代码

.wx-cells {
  width: 100%;
  margin-top: 15rpx;
  font-size: 34rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  background-color: #fff;
}
.wx-cell {
  padding: 20rpx 25rpx;
  display: flex;
  align-items: center;
}
.wx-cell-icon{
  width: 56rpx;
  height: 56rpx;
}
.wx-cell-text{
  flex: 1;
  margin-left: 30rpx;
}
.wx-cell-arrow{
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}

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