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

目录

  • 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.mzph.cn/news/1622.shtml

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

相关文章

SpringBoot 实现 elasticsearch 查询操作(RestHighLevelClient 的案例实战)

文章目录 1. 环境准备1. 查询全部2. 根据 name 查询 match 分词查询3. 根据 name 和 品牌查询 multiMatch 分词查询4. 根据 brand 查询 match 分词查询5. 按照价格 范围查询6. 精确查询7. boolQuery8. 分页9. 高亮查询9. 公共解析 上一节讲述了 SpringBoot 实现 elasticsearch …

【前端技巧】CSS常用知识碎片(八)

CSS常用知识碎片&#xff08;八&#xff09; CSS混合模式 background-blend-mode 属性用于混合元素背景图案、渐变和颜色&#xff1b;mix-blend-mode 属性用于元素与元素之间的混合&#xff1b;isolation 属性用在祖先元素上&#xff0c;限制mix-blend-mode 属性设置的混合模…

Sentinel整合OpenFegin

之前学习了openFeign的使用&#xff0c;我是超链接 现在学习通过Sentinel来进行整合OpenFegin。 引入OpenFegin 我们需要在当前的8084项目中引入对应的依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-sta…

mermaid语言绘制图形

mermaid语言绘制图形 绘制流程图 graph TD; A-->B A-->C B-->D C-->D#mermaid-svg-bENj2N7h8AfGvgYF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bENj2N7h8AfGvgYF .error-icon{fill:#552222;}#me…

栈练习题(逆波兰表达式,有效括号,出入栈次序匹配,最小栈)

目录 基础知识: 中缀表达式和后缀表达式(逆波兰式) 中缀表达式转后缀表达式 后缀表达式求结果 有效括号 栈的压入,弹出序列 最小元素栈 基础知识: 栈:是一种先入后出的数据结构,它的底层是由数组实现的 入栈:push(),出栈pop(),查看栈顶元素peek() 中缀表达式和后缀表…

SpringBoot 集成 EasyExcel 3.x 实现 Excel 导出

目录 EasyExcel官方文档 EasyExcel是什么&#xff1f; EasyExcel注解 springboot集成EasyExcel 简单入门导出 &#xff1a; 实体类 自定义转换类 测试一下 复杂表头一对多导出 &#xff1a; 自定义注解 定义实体类 自定义单元格合并策略 测试一下 EasyExcel官方文档 …

Spring mvc 组件介绍

1. 组件介绍 1.1 DispatcherServlet 统一收口&#xff0c;接收请求&#xff0c;响应结果&#xff0c;相当于转发器&#xff0c;中央处理器。 有了 DispatcherServlet 减少了其它组件之间的耦合度。 1.2 HandlerMapping-处理器映射器 根据请求的url查找Handler&#xff0c;既…

SpringCloud学习路线(5)—— Nacos配置管理

一、统一配置管理 需求&#xff1a; 微服务配置能实现统一的管理&#xff0c;比如希望改动多个配置&#xff0c;但不希望逐个配置&#xff0c;而是在一个位置中改动&#xff0c;并且服务不用重启即用&#xff08;热更新&#xff09;。 &#xff08;一&#xff09;使用配置管理…

AN OVERVIEW OF LANGUAGE MODELS RECENT DEVELOPMENTS AND OUTLOOK

LLM系列相关文章&#xff0c;针对《AN OVERVIEW OF LANGUAGE MODELS: RECENT DEVELOPMENTS AND OUTLOOK》的翻译。 语言模型综述&#xff1a;近年来的发展与展望 摘要1 引言2 语言模型的类型2.1 结构化LM2.2 双向LM2.3 置换LM 3 语言单元3.1 字符3.2 单词和子单词3.2.1 基于统…

Sublime Text 文件采用Unix行尾格式

仅仅设置"default_line_ending": "unix"是不够的&#xff0c;因为这不能自动转换Windows文件。 import sublime_pluginclass SetUnixLineEndingsCommand(sublime_plugin.TextCommand):def run(self, edit):self.view.set_line_endings("unix")c…

十八、Unity游戏引擎入门

1、下载 首先需要下载Unity Hub,下载网址:https://unity.com/cn。 然后在其中下载Unity编辑器并安装,可选择最新版本。 接着需要选择适合的开发环境,例如Android Studio或Xcode,以便进行手机游戏开发。在安装完Unity后,需要根据项目需求下载对应的模块和插件…

CRM排名前三的的系统有哪些特点?

crm经过多年的发展&#xff0c;不仅可以管理好客户关系还是企业重要的战略武器。让企业的销售、市场营销和客服服务部门建立密切联系&#xff0c;在crm一个平台上处理商机&#xff0c;简化业务流程&#xff0c;为组织降本增效。国内crm系统排名哪些技术商更靠前&#xff1f; 1…

微服务sleuth+zipkin——链路追踪

一、链路追踪&#x1f349; 1.什么是链路追踪&#xff1f;&#x1f95d; 在大型系统的微服务化构建中&#xff0c;一个系统被拆分成了许多模块。这些模块负责不同的功能&#xff0c;组合成系统&#xff0c;最终可以提供丰富的功能。在这种架构中&#xff0c;一次请求往往需要…

scrapy----setting配置

基础配置 #1 了解 BOT_NAME "firstscrapy" #项目名字&#xff0c;整个爬虫名字 #2 爬虫存放位置 了解 SPIDER_MODULES ["firstscrapy.spiders"] NEWSPIDER_MODULE "firstscrapy.spiders" #3 记住 是否遵循爬虫协议&#xff0c;一般都设为…

vue或react当中canvas实现电子签名组件和使用canvas进行图片压缩

<template><div><h1>vue3</h1><canvas id"canvasWrite"> 浏览器不支持Canvas,请升级浏览器 </canvas><div><button class"submit" click"submitWrite">提交签名</button><button clas…

jsoncpp源码篇(二)

使用jsoncpp时主要使用到的类有 Json::Value和 Json::Reader; 1. Json::Value类 1.1 提供的转换接口 const char* asCString() const; String asString() const; Int asInt() const; UInt asUInt() const; Int64 asInt64() const; UInt64 asUInt64() const; LargestInt asLarg…

23.Linux查看系统进程

在 Linux 中&#xff0c;您可以使用 ps 命令来查看系统进程。下面是一些常用选项和示例&#xff1a; ps aux&#xff1a;显示当前所有进程的详细信息&#xff0c;包括所有用户的进程。 示例输出&#xff1a; USER PID %CPU %MEM VSZ RSS TTY STAT START TIME…

vscode debug的方式

在.vscode文件夹下建立launch.json 例子1&#xff1a;调试python 来自 https://github.com/chunleili/tiPBD/tree/amg {"version": "0.2.0","configurations": [{"name": "hpbd 5 5","type": "python&quo…

Java开发中使用sql简化开发

引语&#xff1a; 在Java开发中&#xff0c;我们更希望数据库能直接给我们必要的数据&#xff0c;然后在业务层面直接进行使用&#xff0c;所以写一个简单的sql语句有助于提高Java开发效率&#xff0c;本文由简单到复杂的小白吸收&#xff0c;还请多多指教。 使用MySQL数据库…

Stable Diffusion学习笔记

一些零散笔记 灰常好的模型网站 LiblibAI哩布哩布AI-中国领先原创AI模型分享社区 出图效率倍增&#xff01;47个高质量的 Stable Diffusion 常用模型推荐 - 优设网 - 学设计上优设 关键词Prompt顺序 画质 风格 主体 外表、描述 表情、情绪 姿势 背景 杂项 同时可以…