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

news2024/12/28 18:05:06

 如图效果: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>

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

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

相关文章

01简单的CMakeLists.txt示例

CMakeLists.txt 基础 CMake 是一个项目构建工具&#xff0c;并且是跨平台的。关于项目构建我们所熟知的还有Makefile&#xff08;通过 make 命令进行项目的构建&#xff09;&#xff0c;大多是IDE软件都集成了make&#xff0c;比如&#xff1a;VS 的 nmake、linux 下的 GNU ma…

EDU挖掘

1.信息搜集2.漏洞挖掘 1.信息搜集 没事干&#xff0c;准备找个证书站挖挖看&#xff0c;没想到碰到一个小通用系统。 看样子还挺多功能可以测&#xff0c; 这里利用F12 查看前端源码js 或者css文件&#xff0c;直接用hunter或者fofa搜索到同一类型的网站。 Hunter语法&#…

浅谈变电站运维技术模式及应用-安科瑞黄安南

近年来&#xff0c;市场电子资源需求量的逐步上升&#xff0c;使变电系统建设逐步向复杂环境拓展。为保障变电系统运行稳定性及人员管理安全性&#xff0c;无人值班变电站技术运用势在必行&#xff0c;是解决复杂条件下变电设备运行不稳定及人员设备管理效益低下问题的重要核心…

Redis 集群详解及搭建过程

1. 引言 从3.0版本开始&#xff0c;redis具备了集群功能&#xff0c;实现了分布式、容错、去中心化等特性&#xff0c;在生产环境中对于保证数据一致性和安全性、提高系统响应能力都有着很必要的意义。 本文我们就来介绍 redis 集群的三种搭建模式和搭建方法。 目前Redis 7.0对…

Leetcode算法解析——三数之和

1. 题目链接&#xff1a;15. 三数之和 2. 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元…

2023年10月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

首先&#xff0c;来看下效果图 在线体验地址&#xff1a;https://geojson.hxkj.vip&#xff0c;并提供实时geoJson数据文件下载 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据&#xff0…

[Python小项目] 利用Python进行彩票选择方案及分析

利用Python进行彩票选择方案及分析 一、前言 你是否曾梦想过一夜暴富&#xff1f;是否曾想过如果能幸运地中得大奖&#xff0c;生活会有怎样的改变&#xff1f;彩票&#xff0c;这个看似简单的游戏&#xff0c;却可能为我们带来巨大的财富。然而&#xff0c;如何选择号码&…

【Android】Intel HAXM installation failed!

Android Studio虚拟机配置出现Intel HAXM installation failed 如果方案一解决没有作用&#xff0c;就用方案二再试一遍 解决方案一&#xff1a; 1.打开控制面板 2.点击左侧下面最后一个程序 3.点击启用或关闭Windows功能 4.勾选Windows虚拟机监控程序平台 5.接下来重启电脑…

4.2 网际协议IP

思维导图&#xff1a; 前言&#xff1a; **笔记 4.2 - 网际协议IP** 1. **定义与重要性**&#xff1a; - 网际协议IP是TCP/IP体系中的核心协议之一。 - 它是互联网的关键标准协议。 2. **发展背景**&#xff1a; - 又被称为Kahn-Cerf协议。 - 由Robert Kahn和…

并发数计算方法

1、性能测试计算TPS 性能测试的TPS,大都是根据用户真实的业务数据(运营数据)来计算的 普通计算方式:TPS=总请求数/总时间 二八原则计算方法:TPS=总请求*0.8/总时间*0.2 (二八原则就是指80%的请求在20%的时间内完成) 总结:普通计算方式只能满足基本的要求,但是不能很好覆…

为什么使用C#开发软件的公司和程序员都很少?

为什么使用C#开发软件的公司和程序员都很少&#xff1f; 讲几个故事吧&#xff01;如果不爱听&#xff0c;就当个故事。 一个老东家做互联网的&#xff0c;java大概四五十人&#xff0c;四五十个前端&#xff0c;十个左右的c# &#xff0c;那年做点播机&#xff0c;招了两个嵌入…

常见的8个JMeter压测问题

为什么在JMeter中执行压力测试时&#xff0c;出现连接异常或连接重置错误&#xff1f; 答案&#xff1a;连接异常或连接重置错误通常是由于服务器在处理请求时出现问题引起的。这可能是由于服务器过载、网络故障或配置错误等原因导致的。 解决方法&#xff1a; 确定服务器的负载…

嵌入式软件行业真的没前途吗?

嵌入式软件行业真的没前途吗&#xff1f; 嵌入式对新人极不友好&#xff0c;前途是非常好的&#xff0c;问题是你光混日子等不到&#xff0c;没有靠谱的职业路径&#xff0c;你也学不成。最近很多小伙伴找我&#xff0c;说想要一些嵌入式资料&#xff0c;然后我根据自己从业十年…

广州股票开户怎么选择券商最好?炒股开户佣金最低是多少?

广州股票开户怎么选择券商最好&#xff1f;炒股开户佣金最低是多少&#xff1f; 开设股票账户通常需要以下步骤&#xff1a; 1.选择证券公司或经纪商。您可以通过互联网搜索或参考朋友的推荐&#xff0c;选择一家有信誉且服务良好的证券公司或经纪商。 2.填写开户申请表。您…

多用户多回路宿舍用电管理解决方案-安科瑞黄安南

01 引言 近几年来&#xff0c;因违规使用大功率恶性负载电器导致宿舍失火的安全事故在各大高校时有发生&#xff0c;给学生和学校都带来了巨大的损失。北京大学、哈尔滨工业大学、上海商学院以及俄罗斯人民友谊大学等高校学生公寓发生的火灾给高校学生公寓的安全用电敲响…

「深入探究Web页面生命周期:DOMContentLoaded、load、beforeunload和unload事件」

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 1. DOMContentLoaded 1.1 属性 1.2 A…

3500/15 106M1079-01 支持先进和复杂的人工智能计算

3500/15 106M1079-01 支持先进和复杂的人工智能计算 耐能NPU IP系列允许ResNet、YOLO和其他深度学习网络在离线环境下的边缘设备上运行。耐能NPU IP为edge AI提供完整的硬件解决方案&#xff0c;包括硬件IP、编译器、模型压缩。它支持各种类型的卷积神经网络(CNN)模型&#xf…

去雨去雪去雾算法程序中断问题解决方法

中断问题 在进行去雨去雾去雪算法的实验过程中&#xff0c;时常会由于各种意外情况导致实验中断&#xff0c;而在该源码中&#xff0c;并没有对应的中断应对策略&#xff0c;这就导致该源码的健壮性太差&#xff0c;而且博主在实验时也确实遇到多次这种情况&#xff0c;这让博…

数据结构之手撕顺序表(讲解➕源代码)

0.引言 在本章之后&#xff0c;就要求大家对于指针、结构体、动态开辟等相关的知识要熟练的掌握&#xff0c;如果有小伙伴对上面相关的知识还不是很清晰&#xff0c;要先弄明白再过来接着学习哦&#xff01; 那进入正题&#xff0c;在讲解顺序表之前&#xff0c;我们先来介绍…

2.DApp-编写和运行solidity智能合约

题记 演示如何编写solidity智能合约&#xff0c;以及在remix中运行solidity代码。 准备Remix环境 在浏览器中搜索remix&#xff0c;找到remix官网&#xff0c;并打开 由于是国内网络&#xff0c;所以访问国外网站较慢&#xff0c;可以耐心等待加载完成&#xff0c;或者科学上网…