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

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

实现:使用flex

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

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

html 复制代码
<!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>
相关推荐
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in6 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课8 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿9 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我9 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法