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>
相关推荐
GIS程序媛—椰子40 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt