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

news2024/7/6 20:43:39

 上效果:

 实现方式:

 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/773649.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

尚无忧多门店自助宠物洗护系统美容宠物寄养系统小程序

技术框架&#xff1a;thinkphpmysql跨平台uniapp 完全开源无需授权 支持&#xff1a; 多门店商家入驻&#xff0c;管理 门店自助设备预约 电子门锁扫码开门 会员开购买&#xff0c;会员余额充值 自助订单和宠物预约订单管理 宠物添加管理 洗护知识文章设置 <templa…

套餐管理模块开发 -- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖(六)

文章目录 前言一、新增套餐1. 需求分析2. 数据模型3. 代码开发4. 功能测试 二、套餐信息分页查询1. 需求分析2. 代码开发3. 功能测试 三、删除套餐1. 需求分析2. 代码开发3. 功能测试 总结 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#x…

推荐模型——逻辑回归

文章目录 1. 逻辑回归特点2. 基于逻辑回归的推荐流程3. 逻辑回归模型的数学形式4. 逻辑回归模型的训练方法5. 逻辑回归模型的优势5.1 数学含义上的支撑5.2 可解释性强5.3 工程化的需要 6. 逻辑回归的局限性 1. 逻辑回归特点 逻辑回归是融合多种特征的推荐模型。 相比于协同过…

J Roulette(“范式杯”2023牛客暑期多校训练营1)

目录 题目描述&#xff1a; 解题思路&#xff1a; 解题代码&#xff1a; 题目描述&#xff1a; 解题思路&#xff1a; 注&#xff1a;其中对于取模过程中用到了费马小定理&#xff0c;可参考如下博客&#xff1a; (3条消息) 费马小定理及其应用_CTGU-Yoghurt的博客-CSDN博客 …

LiveGBS流媒体平台国标GB/T28181功能-国标级联到海康大华宇视华为等第三方国标平台上级不支持H265/HEVC支持强制推送H264编码

LiveGBS国标级联到海康大华宇视华为等第三方国标平台上级不支持H265/HEVC支持强制推送H264编码 1、背景2、什么是GB/T28181级联3、获取上级接入配置信息3.1、接入第三方国标平台3.2、接入LiveGBS示例 4、配置国标级联4.1、国标级联菜单4.2、添加上级平台4.3、编辑上级平台级联4…

微服务保护---Sentinel(雪崩问题/流量控制/隔离和降级)

目录 1.雪崩问题 1.1.解决雪崩问题的常见方式有四种 2.什么是Sentinel 2.1.安装Sentinel控制台 2.2.微服务整合Sentinel 3.流量控制 3.1.簇点链路 3.2.快速入门 3.2.1.示例 3.2.2.利用jmeter测试 3.3.流控模式 3.3.1.关联模式 3.3.2.链路模式 3.3.3.总结 3.4.流控…

如何在 Ubuntu 20.04 桌面上启用/禁用 wayland

Wayland 是一种通信协议&#xff0c;指定显示服务器与其客户端之间的通信。 默认情况下&#xff0c;Ubuntu 20.04 桌面不会启动 Wayland&#xff0c;而是加载 Xorg 显示服务器X11。 在本教程中您将学习&#xff1a; 如何启用 Wayland如何禁用 Wayland 类别要求、约定或使用的…

途乐证券-股票退市股民如何索赔?

股票退市股民能够经过以下途径来索赔&#xff1a; 1、团体诉讼 团体诉讼允许多个股民联合起来作为原告&#xff0c;以代表整个群体进行索赔。这种方式一般需求证明公司或其管理层存在违法行为或虚假陈说等&#xff0c;导致股民的丢失。 2、单个诉讼 在这种状况下&#xff0c…

el-table 鼠标悬浮时背景色改变

案例&#xff1a; /* css 鼠标悬浮时 */ ::v-deep .el-table tbody tr:hover > td {background-color: rgb(65, 111, 180) !important;color: #ffffff; } 表格背景色透明 ::v-deep .el-table tr {/* background-color: #10274c; */background-color: transparent;color: #f…

【gis插件】arcgis插件界址点编号工具、C#实现思路(附插件下载链接)

数据&#xff1a;界址点图层、宗地图层 要求&#xff1a;找出宗地对应的所有界址点号&#xff0c;对这些界址点号以J1开始按顺序排列 要找出宗地所对应的所有界址点号&#xff0c;这里只要执行一个标识 即可得到这样得到的结果。 难点在于对界址点的编号&#xff0c;经过检查…

【linux】\r 和 \n 的区别、缓冲区的刷新情况、实例:进度条(用 Makefile 自动化构建)

目录 1. \r 和 \n2. 通过一个小程序观察现象3. 进度条 1. \r 和 \n 回车和换行符在 linux 系统下的 gcc 编辑器中&#xff0c;是能观测出有明显区别的。 \n&#xff1a;换行 --> 光标去往下一行的相同位置 \r&#xff1a;回车 --> 光标回到该行最左侧 &#xff08;两步之…

综合案例:书籍购物车

待练习 记得写key <tbody><tr v-for"(item, index) in books":key"item.id"click"rowClick(index)":class"{ active: index currentIndex }"><td>{{ index 1 }}</td><td>{{ item.name }}</td>…

数据库应用:MySQL高级语句(二)

目录 一、理论 1.表连接查询 2.视图 3.联集 4.交集值 5.无交集值 6.CASE 7.空值&#xff08;NULL&#xff09;和无值&#xff08;’ &#xff09;的区别 8.正则表达式&#xff08;精确查询) 二、实验 1.表连接查询 2.视图 3.联集 4.交集值 5.无交集值 6.CASE 7…

Ollydbg(1)字符串解决

链接&#xff1a;https://pan.baidu.com/s/1BaROP5e9UbJMSN1sgOOKbA 提取码&#xff1a;z2i6 输入序列号&#xff0c;如果不正确&#xff0c;提示输入不正确 右键→中文搜索引擎→智能搜索→文本字符串→双击 流程&#xff1a; 一.找到关键处并且修改 两个均可以实现功能的修改…

电力市场经济与管理自学笔记

电力市场经济与管理自学笔记 第二章 电力经济学基本原理2.1 供给、需求与均衡2.1.1 需求曲线2.1.2 供给曲线2.1.3 供给需求的平衡 写本文主要是用于为以后可能从事的电力市场相关方向做点铺垫 第二章 电力经济学基本原理 这一章和高中政治时学的《经济生活》有点类似&#xf…

信息摘要 秘钥签名 数字签名 数字证书 数字验证 数字信封 这都是什么东西?

信息摘要 秘钥签名 数字签名 数字证书 数字验证 数字信封 这都是什么东西&#xff1f; 一下遇见这么多相近的名词&#xff0c;实在是难以区分理解&#xff0c;还是从这些概念产生的缘由理解吧 先看需求&#xff1a;如何保证 数据 在网络中传输时正确的&#xff1f;有没有被篡…

CentOS7安装Mysql8并进行主从复制配置

场景 CentOS7中安装Mysql8并配置远程连接和修改密码等&#xff1a; CentOS7中安装Mysql8并配置远程连接和修改密码等_霸道流氓气质的博客-CSDN博客 在上面实现安装Mysql8的基础上&#xff0c;克隆出两台机器&#xff0c;修改ip后进行mysql的主从复制搭建。 Mysql主从复制 …

vue组件 导出excel,并且可以合并单元格,设置宽度,字体颜色,换行等

需求:在开发后台管理系统中,经常会有导出表格的需求,本案例实现了在导出时,可以合并单元格,设置单元格字体颜色和宽度,并且可以根据 \n 自动换行 插件:xlsx(0.18.4),xlsx-style(0.8.13),file-saver(2.0.5) 效果如下: 注意:不同的版本之间可能方法不能共用 …

【蓝图】p28-p29按键+鼠标点击实现开关门

p28-p29按键鼠标点击实现开关门 p28&#xff0c;创建门的蓝图类创建一个Actor注意&#xff08;当门的中心点不在边角上时&#xff09; 蓝图三个旋转区别按E键开关门使鼠标点击也可以开门可能遇到的bug问题 p28&#xff0c;创建门的蓝图类 actor和组件的区别、门的轴心点修改 …

HttpRunner自动化之初始化和清理操作--hook机制

hook机制 Httprunner 框架中的 hook 机制相当于unittest框架中的 setup , teardown 函数&#xff0c;用来进行测试用例执行之前的环境初始化以及测试用例执行完毕之后的环境清理操作。 httprunner 中的 hooks 机制可以用在测试用例层级也可以用在测试步骤层级&#xff0c;其关键…