当前位置： 首页 > news >正文

CSS 效果：多列文字，第一行对齐,flex方式元素被挤压

news 2026/4/3 14:30:21

 如图效果：2列，第一列只有一行，第二列多行。要求第一行对齐

实现：使用flex 

如果不配置flex-shrink的话，第一列会被挤压

 给第一列：备注配置压缩属性： flex-shrink：0。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>/*  flex布局，通过line-height控制第一行对齐*/.remark {display: flex;flex-direction: row;width: 300px;background-color: #eeeeee;padding: 20px;}.col1 {background-color: #b7d4a8;flex-shrink: 0;/*不压缩，当第二列数据过多时不会被挤压换行 */}.col2 {margin-left: 10px;}</style>
<body>
<div class="remark"><div class="col1">备注:</div><div class="col2">夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.夜静春山空,浓睡酒不醒.s</div>
</div>
</body>
</html>

相关文章：

CSS 效果：多列文字，第一行对齐,flex方式元素被挤压

如图效果&#xff1a;2列&#xff0c;第一列只有一行&#xff0c;第二列多行。要求第一行对齐 实现&#xff1a;使用flex 如果不配置flex-shrink的话&#xff0c;第一列会被挤压 给第一列&#xff1a;备注配置压缩属性&#xff1a; flex-shrink&#xff1a;0。 <!DOCTYPE…...

编程日记 2023/10/18 8:58:45

优维低代码实践：片段

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…...

编程日记 2023/10/18 8:57:43

【计算机网络】第一章、计算机网络体系结构

1.1计算机网络的组成与分类 1.计算机网络的组成 从不同的角度来看内容从组成上看硬件、软件、协议从工作方式上岸边缘部分、核心部分从功能上看通信子网、资源子网 2.计算机网络的分类 角度内容分布范围广域网、城域网、局域网、个域网传输技术广播式网络、点对点网络拓扑结…...

编程日记 2023/10/18 8:56:42

vr火灾逃生安全科普软件开展消防突击教育安全有效

VR火灾逃生自救虚拟体验是一种利用虚拟现实技术来模拟火灾逃生自救场景的教育工具。以下是这个体验的几个优点&#xff1a;VR消防安全体验馆的出现&#xff0c;为城市的安全教育开辟了新的途径。这种创新的体验方式&#xff0c;能够让市民在模拟的火灾场景中学习并掌握消防安全…...

编程日记 2023/10/18 8:55:41

Kafka SASL认证授权（五）ACL源码解析

Kafka SASL认证授权（五）ACL源码解析。 官网地址：https://kafka.apache.org/ 一、ACL检查流程解析 一起看一下kafka server的启动与监听流程： Kafka -> KafkaServer -> SocketServer、KafkaRequestHandler 其中KafkaServer做相关的初始化，包括SocketServer 与 han…...

编程日记 2023/10/18 8:54:37

logback-spring.xml 中根据不同的业务表示，分类打印到不同的文件夹、时区动态设置

logback-spring.xml 中根据不同的业务表示&#xff0c;分类打印到不同的文件夹、时区动态设置 logback-spring.xml 完整配置 <?xml version"1.0" encoding"UTF-8"?> <configuration debug"false" scan"true" scanPeriod&…...

编程日记 2023/10/18 8:53:35

linux系统编程之一

1&#xff09;fcntl的使用方法 fcntl作用:可以用fcntl函数改变一个已打开的文件属性而不必重新打开文件&#xff1b; 堆排序是完全二叉树&#xff0c;但不是排序二叉树&#xff1b; 排序二叉树要求兄弟节点之间有大小关系&#xff0c;比如说左小右大&#xff1b; 堆排序仅要求…...

编程日记 2023/10/18 8:52:35

【LeetCode】《LeetCode 101》第十三章：链表

文章目录 13.1 数据结构介绍13.2 链表的基本操作206. 反转链表&#xff08;简单&#xff09;21. 合并两个有序链表&#xff08;简单&#xff09;24.两两交换链表中的节点&#xff08;中等&#xff09; 13.3 其它链表技巧160. 相交链表&#xff08;简单&#xff09;234. 回文链表…...

编程日记 2023/10/18 8:51:33

Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总

Electron 嵌入的页面中注入的是 preload.js 通过在标签中给 prelaod赋值&#xff0c;这里提到了 file://前缀&#xff0c;以及静态目录 static 怎么获取 实际代码&#xff0c;其中__static就是我们存放静态文件的地方&#xff0c;这个 static 是 electron 源代码根目录下的文件…...

编程日记 2023/10/18 8:50:32

AI人工训练师，提升外呼机器人的运营效果

外呼机器人是企业客服和营销的重要工具&#xff0c;外呼机器人可以通过语音识别和语音合成技术&#xff0c;自动拨打电话并进行客户服务和营销推广等工作。由于外呼机器人错误识别和理解偏差容易影响外呼效果&#xff0c;许多外呼机器人厂商选择通过AI人工训练师的技术手段来提…...

编程日记 2023/10/18 8:49:30

nginx正向代理、反向代理、负载均衡（重中之重）

nginx中有两种代理方式&#xff1a; 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;基于tcp或udp的流量转发&#xff09; 一、七层代理 原理&#xff1a;客户端请求代理服务器&#xff0c;由代理服务器转发客户端的http请求&#xff0c;转发到内部的服务器…...

编程日记 2023/10/18 8:48:29

MySQl_2

目录 函数 一.字符串函数 二.数值函数 三.日期函数 四.流程控制函数 约束 多表查询 多表关系 一.内连接 二.外连接 三.自连接 四.联合查询 五.子查询 标量子查询 列子查询 行子查询 表子查询 函数 一.字符串函数 二.数值函数 SELECT LPAD(FLOOR(RAND()*1000000),…...

编程日记 2023/10/18 8:45:24

使用Filter AND Interceptor校验等录(全网独一份，机不可失)

说明&#xff1a;基于spring boot进行的校验 1.熟悉如何使用jwt令牌。&#xff08;不会的看这里&#xff1a;带你领略JWTl令牌的魅力&#xff01;&#xff01;&#xff01;-CSDN博客&#xff09; Filter和Interceptor共用文件&#xff1a;&#xff08;可以仿照&#xff0c;根据…...

编程日记 2023/10/18 8:43:22

ubuntu20.04安装FTP服务

安装 sudo apt-get install vsftpd# 设置开机启动并启动ftp服务 systemctl enable vsftpd systemctl start vsftpd#查看其运行状态 systemctl status vsftpd #重启服务 systemctl restart vsftpdftp用户 sudo useradd -d /home/ftp/ftptest -m ftptest sudo passwd ftptest…...

编程日记 2023/10/18 8:42:21

MyBatisPlus（二十）防全表更新与删除

说明 针对 update 和 delete 语句&#xff0c;阻止恶意的全表更新和全表删除。 实现方式 配置BlockAttackInnerInterceptor拦截器 代码 package com.example.core.config;import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.p…...

编程日记 2023/10/18 8:41:20

14.9 Socket 高效文件传输

网络上的文件传输功能也是很有必要实现一下的&#xff0c;网络传输文件的过程通常分为客户端和服务器端两部分。客户端可以选择上传或下载文件&#xff0c;将文件分块并逐块发送到服务器&#xff0c;或者从服务器分块地接收文件。服务器端接收来自客户端的请求&#xff0c;根据…...

编程日记 2023/10/18 8:40:18

第二节 threejs简单案例

1. 创建3D场景 // 创建3D场景对象Scene const scene new THREE.Scene();// 更改场景背景颜色 scene.background new THREE.Color(#F5F5F5);2. 创建透视投影相机 // 实例化一个透视投影相机对象 const camera new THREE.PerspectiveCamera();相机位置 // 根据需要设置相机…...

编程日记 2023/10/18 8:38:15

PowerShell批量修改DNS域名解析

批量添加DNS A记录 $dnsServerName"" # DNS服务器的服务器名称&#xff0c;如果是在DNS服务器本机执行则可留空 $containerName"test.com" # 域名的后缀也就是DNS Zone Name $mydns[WMIClass]"ROOT\MicrosoftDNS:MicrosoftDNS_resourceRecord"…...

编程日记 2023/10/18 8:37:14

uniapp(uncloud) 使用生态开发接口详情3(新增产品分类,产品列表,新闻列表)

我的想法是有产品分类,产品列表,新闻咨询,新闻列表 项目中, uniCloud > database 目录下新建 sy_product_nav.schema.json // 代码如下 {"bsonType": "object","required": ["classname"],"permission": {"read&…...

编程日记 2023/10/18 8:36:13

XTU-OJ 1339-Interprime

题目描述 n是两个连续的奇素数的平均值&#xff0c;且n不是素数&#xff0c;那么我们称这样的数是"内部素数"。求区间[a,b]内"内部素数"的个数。比如&#xff0c;前5个"内部素数"是4,6,9,12,15。 输入 第一行是样例数T(1≤T≤1000)。 每个样例一…...

编程日记 2023/10/18 8:35:12

全方位解析GBFR Logs：《碧蓝幻想：Relink》战斗数据分析平台

全方位解析GBFR Logs&#xff1a;《碧蓝幻想&#xff1a;Relink》战斗数据分析平台 【免费下载链接】gbfr-logs GBFR Logs lets you track damage statistics with a nice overlay DPS meter for Granblue Fantasy: Relink. 项目地址: https://gitcode.com/gh_mirrors/gb/gbf…...

编程新知 2026/4/3 14:23:45

从旋转矩阵到李代数：三维空间刚体运动的速度解析与几何直观

1. 刚体运动的基本概念&#xff1a;从旋转轴到角速度 想象你手里握着一个魔方&#xff0c;当你想让它旋转时&#xff0c;总会下意识地找一个转动轴。这个简单的动作背后&#xff0c;藏着描述三维空间刚体运动的核心数学工具。在机器人控制和计算机视觉领域&#xff0c;我们经常…...

编程新知 2026/4/3 11:38:01

3分钟搞定！为Word安装APA第7版参考文献样式的完整指南

3分钟搞定&#xff01;为Word安装APA第7版参考文献样式的完整指南 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 还在为学术论文的参考文献格式而烦恼…...

编程新知 2026/4/3 11:09:43

科哥二次开发AWPortrait-Z体验：批量生成人像，效率提升300%

科哥二次开发AWPortrait-Z体验&#xff1a;批量生成人像&#xff0c;效率提升300% 1. 为什么选择AWPortrait-Z进行人像生成&#xff1f; 在当今内容创作领域&#xff0c;高质量人像需求呈现爆发式增长。从电商产品展示到社交媒体内容&#xff0c;专业级人像已经成为刚需。然而…...

编程新知 2026/4/3 5:50:56

效率提升：用快马ai加速openclaw在ubuntu上的抓取方案寻优与评估

最近在做一个机器人抓取优化的项目&#xff0c;需要在Ubuntu系统上使用OpenClaw库来实现高效的物体抓取方案。整个过程涉及到抓取位姿生成、稳定性评估和碰撞检测等多个环节&#xff0c;手动编码调试起来特别耗时。后来尝试用InsCode(快马)平台的AI辅助功能&#xff0c;发现能大…...

编程新知 2026/4/3 5:16:11

工业冷水机控制程序西门子1200plc含压缩机，电子膨胀阀控制策略，饱和温度计算公式

工业冷水机控制程序西门子1200plc含压缩机&#xff0c;电子膨胀阀控制策略&#xff0c;饱和温度计算公式凌晨三点钟的冷水机组房&#xff0c;设备轰鸣声中闪烁着PLC运行指示灯。手指划过TP1200触摸屏的瞬间&#xff0c;压缩机启动电流曲线在屏幕上划出漂亮的爬坡轨迹——这就是…...

编程新知 2026/4/3 3:12:41

探索高压柔性输电系统中6脉冲与12脉冲晶闸管控制HVDC仿真模型

高压柔性输电系统6脉冲&#xff0c;12脉冲晶闸管控制HVDC的仿真模型&#xff0c;说明文档在电力传输领域&#xff0c;高压柔性输电系统&#xff08;HVDC&#xff09;以其高效、灵活等特性占据着重要地位。其中&#xff0c;6脉冲和12脉冲晶闸管控制的HVDC仿真模型更是关键部分&a…...

编程新知 2026/4/3 2:38:02

74HC595移位寄存器驱动原理与CrazyHC595库深度解析

1. CrazyHC595库概述&#xff1a;面向嵌入式工程师的74HC595移位寄存器驱动深度解析74HC595是工业界最经典、应用最广泛的8位串行输入/并行输出移位寄存器芯片之一。其核心价值在于以3根GPIO线&#xff08;数据、时钟、锁存&#xff09;扩展出8个可独立控制的数字输出通道&…...

编程新知 2026/4/3 0:34:29

STM32温室智能监控系统开发实战

1. 项目概述这个温室培育系统项目是我去年为一个农业科技公司开发的实战案例。整套系统基于STM32F103RCT6主控&#xff0c;整合了12种硬件模块&#xff0c;实现了温室环境的全自动化监控与调控。最让我自豪的是&#xff0c;系统上线后客户反馈作物产量提升了23%&#xff0c;水电…...

编程新知 2026/4/3 0:22:16

HUSB238 USB-C PD物理层驱动设计与ESP32集成指南

1. HUSB238 驱动库概述HUSB238 是由 Microchip 推出的 USB Type-C 和 USB PD&#xff08;Power Delivery&#xff09;源端&#xff08;Source&#xff09;控制器&#xff0c;专为高集成度、小尺寸 USB-C 充电应用设计。其核心功能包括&#xff1a;USB-C 插拔检测&#xff08;CC…...

编程新知 2026/4/3 0:22:13