上效果:
实现方式:
display:flex ,
行排列,默认靠左对齐,
然后让第三个元素自动占满剩余的空间:flex-grow:1,text-align:end
// wxml
<!-- 支付方式-->
<view class="payment_section">
<view class="payment_method">选择支付方式</view>
<view class="fz34 pay_item"><image class="pay_wt" src="/images/icon/wct.png"></image> 微信支付
<view class="check_btn_outer">
<image class="check_btn" src="/images/icon/checked_o.png"></image>
</view></view>
</view>
// 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;
}