vue实现左右布局(右侧超出的时候换行展示)

news2024/11/29 2:42:48

目录

  • vue实现左右布局(右侧超出的时候换行展示)
    • code
    • 效果

vue实现左右布局(右侧超出的时候换行展示)

code

      <ul class="body-detail">
        <li>
          <div class="li-label">姓名</div>
          <div class="li-value">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
        </li>
        <li>
          <div class="li-label">身份证号码</div>
          <div class="li-value">XXXXXXXX</div>
        </li>
      </ul>
  .body-detail {
    li {
      display: flex;
      flex-flow:wrap;
      line-height: 30px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      .li-label {
        width: 80px;
        color: #323233;
        flex: 0 0 auto;
      }
      .li-value {
        width: calc(100% - 80px);
        color: #7E8299;
        flex: 1 1 auto; 
        word-wrap: break-word;
      }
    }
  }

效果

在这里插入图片描述

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

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

相关文章

ai绘画软件哪个好?这几款ai绘画图片生成器分享给你

近期我有个朋友过生日&#xff0c;我想画一幅动物图片绘画送给他&#xff0c;但是奈何我的绘画技巧实在是不堪入目。好在我有几个朋友刚好是ai绘画师&#xff0c;他们跟我说&#xff0c;现在有一些ai绘画工具&#xff0c;可以轻松帮助我画出非常优质的动物图片画作&#xff0c;…

汤臣倍健盈利水平再创新高,其爆品逻辑或可复制粘贴!

前几天&#xff0c;汤臣倍健官方发布了《2023年半年度业绩预告》&#xff0c;预计归母净利润约13.63亿元至15.72亿元。对比上年同期增长30%—50%&#xff0c;上半年盈利水平有望超过2021年中报业绩的13.71亿元&#xff0c;再创新高。 汤臣倍健最初成立于1995年&#xff0c;在20…

项目经理为什么越来越难做了?

作为项目经理&#xff0c;我们面临着来自各方的挑战和质疑。这个职位的困难度越来越高&#xff0c;越来越多的人开始对这个职位感到不满意。然而&#xff0c;要成为一名优秀的项目经理&#xff0c;我们需要深入思考并采取正确的策略。 1、明确项目目标 项目经理在接手一个项目…

类 和 对象

目录 1、面向对象编程 2、面向对象编程 2.1面向对象编程特征 3、类和对象的概念 3.1类的定义 3.11属性 3.12方法 3.13重载 3.14递归 3.13返回值return 3.2对象 3.2.1对象组合 4、jvm内主要三块内存空间 5、参数传值 1、面向对象编程 面向过程&#xff1a;关注的是步骤…

fastadmin 行内无刷新编辑editable插件使用方法详解

后台插件安装好后&#xff0c;只用设置js即可 define([jquery, bootstrap, backend, table, form,editable], function ($, undefined, Backend, Table, Form) {var Controller {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: wd/guanli/in…

天意云RstudioServer使用教程

写在前面 Rstudio与R语言的关系就像汽车和引擎一样&#xff0c;两者相得益彰不可分割。在日常使用过程中&#xff0c;需要在Rstudio中进行代码边写、调试、运行&#xff0c;一般情况下这个过程是在自己的笔记本电脑完成的。 emmm...... 有没有一种更优雅的方式&#xff1f; Rst…

https重定向后协议变为http

如果使用了nginx&#xff0c;可以再nginx中配置proxy_redirect将http转为https proxy_redirect http:// https://;

python与深度学习(二):ANN和手写数字识别二

目录 1. 说明2. 手写数字识别的ANN模型测试2.1 导入相关库2.2 加载数据和模型2.3 设置保存图片的路径2.4 加载图片2.5 图片预处理2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章训练的模型进行测试…

SpringMVC学习笔记--下篇

SpringMVC学习笔记 文章目录 SpringMVC学习笔记1、JSON1.1、什么是JSON1.2、JSON 和 JavaScript 对象互转1.3、Controller返回JSON数据1.3.1、使用Jackson工具1.3.1.1、乱码问题的代码优化1.3.1.2、集合测试1.3.1.3、输出时间对象1.3.1.4、抽取为工具类 1.3.2、使用FastJson的工…

Java虚拟机——类加载的过程

接下来&#xff0c;我们会详细了解Java虚拟中类加载的全过程。即加载、验证、准备、解析和初始化这五个阶段所执行的具体动作。 加载 在加载阶段下&#xff0c;Java虚拟机需要完成三件事 通过一个类的全限定名来获取定义此类的二进制字节流将这个字节流所代表的静态存储结构…

Small Tip: 怎么找S4HANA所有的CDS View

1. SAP Business Accelerator Hub 到网址&#xff1a;https://api.sap.com 2. 到Categories底下找。如果没看见CDS View就去View all categories 3. 找到CDS Views之后&#xff0c;点击进去。 4. 按Package 分类来找&#xff1a;

实时网络更改检测

未经授权的配置更改可能会对业务连续性造成严重破坏&#xff0c;这就是为什么使用实时更改检测来检测和跟踪更改是网络管理员的一项关键任务。尽管可以手动跟踪更改&#xff0c;但此方法往往非常耗时&#xff0c;并且通常会导致人为错误&#xff0c;例如在跟踪时错过关键网络设…

Spring Boot : ORM 框架 JPA 与连接池 Hikari

数据库方面我们选用 Mysql &#xff0c; Spring Boot 提供了直接使用 JDBC 的方式连接数据库&#xff0c;毕竟使用 JDBC 并不是很方便&#xff0c;需要我们自己写更多的代码才能使用&#xff0c;一般而言在 Spring Boot 中我们常用的 ORM 框架有 JPA 和 Mybaties &#xff0c;本…

C#的ref和out使用

ref和out是C#中用于参数传递的关键字&#xff0c;它们都允许在方法内部修改参数的值&#xff0c;区别如下&#xff1a; 1、ref关键字&#xff1a;使用ref关键字声明的参数&#xff0c;在方法调用前必须被初始化&#xff0c;并且可以被视为已经赋予了一个初始值。在方法内部对r…

会议OA项目之会议发布(多功能下拉框的详解)

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.主要功能点介绍 二.效果展示 三.前…

【网络编程】传输层协议——TCP协议

文章目录 一、TCP协议格式1.1 TCP如何将报头与有效载荷进行分离&#xff1f;1.2 有效载荷如何向上交付&#xff1f;1.3 TCP报头的理解1.4 序号与确认序号1.4.1 网络不可靠问题1.4.2 32位序号1.4.2 32位确认序号 1.5 窗口大小1.6 六个标志位 二、确认应答机制&#xff08;ACK&am…

集成学习Bagging——随机森林模型

目录 1. Bagging方法的基本思想 2. 随机森林RandomForest 2.1 RandomForestRegressor的实现 2.2 随机森林回归器的参数 2.2.1 弱分类器结构 2.2.2 弱分类器数量 2.2.3 弱分类器训练的数据 2.2.4 其它参数 1. Bagging方法的基本思想 Bagging又称“袋装法”&#xff0c;它…

keyclaok~keycloak存到cookie中的值和session_state

keycloak存到cookie中的值 AUTH_SESSION_IDKEYCLOAK_IDENTITYKEYCLOAK_SESSION AUTH_SESSION_ID 用户的当前session_state&#xff0c;它是会话级的&#xff0c;关闭浏览器就没了 KEYCLOAK_IDENTITY 它是用户跨端登录的基础&#xff0c;它也是一个jwt串&#xff0c;解析后…

Scala学习(三)

2.8 浮点类型&#xff08;Float、Double&#xff09; Scala的浮点类型可以表示一个小数&#xff0c;比如123.4f&#xff0c;7.8&#xff0c;0.12等等。 1&#xff09;浮点型分类 数据类型 描述 Float [4] 32 位, IEEE 754标准的单精度浮点数 Double [8] 64 位 IEEE 754标准的双…

electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

文章目录 引入实现步骤测试结果 引入 在electron中&#xff0c;我们可以通过electron-builder的配置文件来设置打包后的应用图标 实现步骤 因为mac环境下的图标需要特殊格式&#xff0c;这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 # 安装electron-ico…