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;
}
相关推荐
wuhen_n3 分钟前
LangChain Agents 实战:构建智能文件管理助手
前端·javascript·人工智能·langchain·ai编程
Vfw3VsDKo8 分钟前
Flink源码阅读:Netty通信
java·前端·flink
别抢我的锅包肉41 分钟前
【FastAPI】 + SQLAlchemy 异步 ORM 实现完整 CRUD 操作
前端·fastapi
. . . . .1 小时前
抽象语法树 AST
javascript
zero15971 小时前
TypeScript 快速实战系列:基础入门|TypeScript 核心语法 1 小时吃透(必备基础)
javascript·typescript·大模型编程语言
tq6J5Yg141 小时前
windows10本地部署openclaw
前端·python
ISkp3V8b42 小时前
从 ReAct 到 Workflow:基于云端 API 构建事件驱动的智能体
前端·react.js·前端框架
星空2 小时前
前端--A_1--THML标签
前端
GISer_Jing2 小时前
前端架构师视角:Electron 知识框架全解析(含实战+面试)
前端·面试·electron
全栈练习生2 小时前
封装数字滚动动画函数
前端