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

上效果:

实现方式:

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;
}
相关推荐
candyTong11 分钟前
Claude Code 每次调用 API 时,上下文是怎么"拼"出来的?
javascript·后端·架构
小林ixn16 分钟前
别再背“变量提升”了!深入编译执行,彻底搞懂 JavaScript 运行机制
javascript
用户8524950718417 分钟前
为什么变量能 未定义先使用?
javascript·程序员
Larcher41 分钟前
JS 变量提升:代码没动,为什么执行顺序就变了?
前端·javascript·前端框架
yingyima42 分钟前
MySQL 事件调度器速查:核心语法与实战代码
前端
要写代码42 分钟前
2026-Css忘掉一切、归零再启
css
GISer_Jing42 分钟前
Claude Code多Agent架构深度剖析
前端·人工智能·架构·自动化
comphub43 分钟前
comp-hub:让你的 Vue 业务组件真正"活"起来
前端
AI砖家44 分钟前
Claude Code 跳过确认完全指南:让 AI 自己完成开发任务
前端·人工智能·python·ai编程·代码规范
KaMeidebaby1 小时前
卡梅德生物技术快报|Pull Down 实验在 lncRNA - 蛋白互作机制研究中的应用实例解析
大数据·前端·架构·spark·新浪微博