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>
相关推荐
万少6 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder8 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix18 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句19 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易19 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟26 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子33 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端1 小时前
发布一个monaco-editor 汉化包
前端·npm·vite