css 3个元素行排列,前2个元素靠左,第三个元素靠右

 上效果:

css 3个元素行排列,前2个元素靠左,第三个元素靠右_第1张图片

 实现方式:

 display:flex ,

行排列,默认靠左对齐,

然后让第三个元素自动占满剩余的空间:flex-grow:1,text-align:end 

// wxml

  
    选择支付方式
     微信支付
     
       
     
  


// wxss
.payment_method {
  margin: 35rpx 0 40rpx 30rpx;
}

.pay_item {
  display: flex;
  align-items: center;
  margin: 0 48rpx;
}

.pay_wt {
  width: 70rpx;
  height: 60rpx;
  margin-right: 15rpx;
}

.check_btn {
  width: 39rpx;
  height: 39rpx;
}

.check_btn_outer {
  flex-grow: 1;
  text-align: end;
}

你可能感兴趣的:(css,前端,javascript)