微信小程序8__一行2 列的布局，一行2列的图片布局

如果实现以下效果， 开发者需要怎么样做呢？

在index.wxml中增加以下布局：

 

  
  精品推荐


 
  
    
      
      产品名称01
      ￥ 21.6
      
      
      
      产品名称02
      ￥ 185.6
      

在index.wxss文件中增加以下样式：

/** 一行2列布局， 左竖线 右文字***/
.line-y{
  width: 3px;
  height: 18px;
  display: inline-block;
  background-color:brown;
  margin-left:1px;
}

view.text{
  display: flex;
  align-items:center;
  position: relative;
  padding:6px;
  background-color: aliceblue;
}
view.text text{
  margin-left:14px;
}


/**精品推荐 1行2列图片的样式**/
.cps2{
  display: flex;
  flex-wrap: wrap; /**自动换行***/
  margin-top:10rpx;
}
.cp-item2{
  width: 48%;
  display: flex;
  align-items:center;
  flex-direction: column;
  padding:5rpx;
}
.cp-image2{
  width: 330rpx;
  height: 330rpx;
}
.cp-item2 text{
  padding-top:10rpx;
  font-size: 35rpx;
  width: 100%;
  text-align:left;
  background-color:aliceblue;
  margin-left:20rpx;
}

实现效果如下 ：