绝对absolute定位后，元素宽度问题

最新推荐文章于 2023-10-30 10:02:36 发布
最新推荐文章于 2023-10-30 10:02:36 发布
阅读量5.4k 收藏 6
点赞数 7
分类专栏： css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45219069/article/details/104440350
版权

由于设置了绝对定位，宽度以子元素内容的宽度一致，此时设置什么最小宽度那些都没用，但是又不能写死宽度，需要根据内容来撑开

采用 white-space: nowrap；强制不换行，让其内容撑开

position: absolute;
white-space: nowrap;

前

在这里插入图片描述

后

在这里插入图片描述

海龟先生plus
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
FireFox正常 IE错位的绝对定位元素
09-25
本文将深入探讨在"FireFox正常 IE错位的绝对定位元素"这一问题中的关键知识点。 1. **绝对定位与浮动元素的关系**： 当一个绝对定位的元素紧邻着两个浮动元素时，可能会在不同的浏览器中表现出不同的行为。在Fire...
css之position相对定位和绝对定位
weixin_33862993的博客
07-15 537
一、position的四个值：static、relative、absolute、fixed。 绝对定位：absolute和fixed统称为绝对定位 相对定位：relative 默认值：static 二、relative定位与absolute定位的区别 实例： HTML代码： css代码： 初始效果： 1、relative：相对于原来位置移动，元素设置...
3d理解Z-index：绝对定位/固定定位元素的宽度百分比设置失效问题
DYNskr的博客
04-12 348
绝对定位/固定定位元素宽度设置百分比失效问题
绝对定位元素的最大宽度受父元素宽度影响失效
zbailing的博客
08-14 2668
代码 .box { position: relative; margin: 50px; width: 150px; height: 200px; background-color: #999; } .tooltip { position: absolute; top: 50px; left: 200px; max-width: 200px; ...
关于又见绝对定位元素受限于父容器宽度的问题
FuChenRenShen的博客
09-29 2903
再一次的发现了这个问题，无论是绝对定位元素还是浮动元素，他们有一个特性：受限于父容器的宽度
position
baneju9157的博客
09-21 351
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
怎样使绝对定位的元素宽度自适应子元素
最新发布
李水灵的博客
10-30 290
在一个大屏展示页面中，使用了全局绝对定位，元素相对于父元素（全局）进行绝对定位，元素气泡描述再次使用了绝对定位，气泡相对于元素进行绝对定位。气泡描述有两行数字描述，需要自适应宽度。
IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
09-25
当绝对定位元素没有宽度时，浏览器可能尝试将其视为普通流的一部分，从而允许`margin-top`生效。 问题二：`layer1`无法靠左，其左侧距离由第一个非绝对定位元素`layer3`的`margin-left`决定。 在IE6/7中，`layer1`...
绝对定位的DIV宽度自动适应的一个方法
10-31
最终，作者进一步优化了样式，包括调整背景颜色、透明度、边框样式等，以增强视觉效果，并保持绝对定位元素的宽度自适应特性。最终代码如下： ```html ; -moz-opacity:0.9; filter:alpha(opacity=90); position:...
绝对定位也可触发行内元素的layout说明
12-11
这里我们将专注于讨论如何通过CSS的`display`属性和`position`属性来触发行内元素的layout，并探讨在特定情况下，如何使用绝对定位来解决布局问题。 首先，`display`属性用于定义元素的显示类型。在提到的"行内元素...
编程语言详解css绝对定位对元素宽度的影响
10-29 1502
编程语言详解css绝对定位对元素宽度的影响 一、问题来源 自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度p#main并不是我理想中六张图片宽度的总和，原来是我没有显式设置这个容器p#main的宽度。但是问题来了，没有显式地设置容器宽度，大家可能就会
CSS - 解决 绝对定位 子元素受父元素影响 无法宽度自适应
weixin_55042716的博客
08-17 2673
子元素想设置自适应宽度，可是受父元素影响，无法撑开到超过父元素的宽度。
absolute绝对定位的元素显示不出来的可能原因
hzxOnlineOk的博客
08-07 1万+
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
css绝对定位 自适应宽度的问题
liyangready的专栏
11-09 8658
css绝对定位的元素，如果不设定宽度，宽度如何计算？
元素position，且子元素全部position：absolute时父元素高度无法自适应时解决办法
weixin_45440813的博客
03-24 8069
今天遇到父元素高度无法自适应子元素的高度问题，试了各种清除浮动都无效，各种百度才弄明白。 问题描述：父元素有position：relative ；两个子元素都是position：absolute；（因为经常念叨父R子A习惯性布局）； 中间试了各种清除浮动的办法，均无法使父元素产生高度； 产生原因：因为position：absolute会脱离标准流，所以父元素无法自适应子元素高度，而清除...
css外边距塌陷问题
qq_42132814的博客
11-22 415
CSS外边距塌陷问题 CSS外边距塌陷问题主要有兄弟元素和父子元素的外边距塌陷： 兄弟元素： 解决方法： 给其中一个div一个父级的div，并设置overflow：hidden（BFC原理） 浮动/display：inline-block/绝对定位的元素不会与垂直方向上的元素发生外边距塌陷。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
关于css中的position:absolute定位不起作用或者溢出父元素隐藏不了的问题
热门推荐
glgom的博客
11-05 3万+
position:absolute定位不起作用？溢出父元素隐藏不了？的问题 总的原因还是对定位的理解错误。 position:absolute是相对父元素进行绝对定位的，且该父元素必须定义有position的值(relative、absolute、fixed)，若父元素没有定义有position，则是相对于body进行定位。 position总的来说分为绝对定位和相对定位。    值 ...
实操解决position:absolute之后margin:auto失效的问题
facial_123的博客
03-09 2778
实操解决绝对定位之后margin：auto失效的问题（亲测有效） 前言 最近在学习前端 HTML和 CSS的过程中，遇到了一个问题，那就是将一个div元素（内含文本）利用 position:absolute 属性设置为绝对定位之后，想再对整个元素进行依照设备的水平居中便很难了，也就是说属性及其值：margin:10px auto; 已经失效了，正如下面所示： 一、问题重现 可以看到，在下面的HTML代码中，我定义了一个div元素，并且里边包含了文本，如下所示： <!DOCTYPE html> &
CSS+DIV在用absolute绝对定位时怎么使页面自适应
anquanxie2713的博客
10-21 1109
<div id="div1" style="position:absolute;left:10%;top:20%;width:50%;"> <div id="div2" style="position:absolute;left:20%;top:30%;width:20%;"> <div id="div3" style="position:absol...
绝对定位想固定到父元素的左侧中间
07-27
要将绝对定位的元素固定到父元素的左侧中间，可以使用以下步骤： 1. 确保父元素具有相对定位。如果父元素没有设置定位属性，则需要将其设置为相对定位，例如使用 CSS 属性 `position: relative;`。 2. 将要绝对定位的子元素设置为绝对定位，使用 CSS 属性 `position: absolute;`。 3. 使用 `top: 50%;` 属性将子元素垂直居中。这将使子元素的顶部与父元素的垂直中心对齐。 4. 使用 `transform: translateX(-50%);` 属性将子元素向左移动其自身宽度的一半。这将使子元素的中心点与父元素的水平中心对齐。 下面是一个示例代码： ```html <style> .parent { position: relative; width: 500px; height: 300px; background-color: lightgray; } .child { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); background-color: coral; padding: 10px; } </style> <div class="parent"> <div class="child"> 绝对定位的元素 </div> </div> ``` 在上面的示例中，父元素具有灰色背景，子元素具有珊瑚色背景，且子元素位于父元素的左侧中间位置。 你可以根据实际需求调整父元素和子元素的宽度、高度、背景色等样式。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值