怎样使绝对定位的元素宽度自适应子元素

项目场景:

在一个大屏展示页面中,使用了全局绝对定位,元素相对于父元素(全局)进行绝对定位,元素气泡描述再次使用了绝对定位,气泡相对于元素进行绝对定位。

气泡描述有两行数字描述,需要自适应宽度。


问题描述

但是由于使用了绝对定位,子元素无法自适应,只能给定宽度撑开父元素。

给定宽度的话,数字短了,背景图就过长,数字长了,就会自动换行,影响美观。


解决方案:

bash 复制代码
子元素
display: inline-block;
white-space: nowrap;  //强制撑开并且能够自适应
相关推荐
轻口味15 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami17 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
机器视觉李小白1 小时前
使用 HTML 和 CSS 实现绚丽的节日烟花效果
css·html·烟花·节日·节日祝福
AiFlutter1 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter