具有绝对位置的 div 的宽度取决于其父级的宽度？答案

【问题标题】：The width of div with absolute position depends on its parent's width?具有绝对位置的 div 的宽度取决于其父级的宽度？
【发布时间】：2023-03-26 07:50:01
【问题描述】：

我希望绝对位置的 div 的宽度取决于其内容而不是其父级。例如，

<div style="position:absolute">
 <div style="position:absolute">
  <div style="position:absolute">Div in Div</div>
 </div>
</div>

会导致自动换行，如http://jsfiddle.net/ymgfN/2/所示

看起来内部 div 的宽度将取决于其父级的宽度，即使它的位置是绝对的。例如，如果我们为其父级指定宽度，它将按预期工作（无自动换行）：http://jsfiddle.net/ymgfN/3/

不幸的是，我无法提前指定父项的宽度——最终我将使其宽度取决于其子项。而且，我必须使用绝对位置。纯CSS可以吗？

一些背景：我不是为了完成一些设计而制作一个页面——我知道为了任何合理的需求而拥有三个堆叠的绝对位置是很疯狂的。相反，我正在做一些实验，看看绝对定位是否可以成为解决一系列布局问题的通用方法（通用复杂布局，通常需要巧妙地使用静态/绝对/浮动）。不幸的是，我遇到了这个问题，这会使在任何地方使用绝对位置的想法变得愚蠢。

【问题讨论】：

如果你为它的子元素指定宽度，那么父元素将调整为子元素的宽度。我不确定这就是你要找的东西！....

标签： css html css-position

【解决方案1】：

元素在从文档流中删除之前获取其宽度和高度。当您绝对定位外部元素时，它会从流中移除，并且由于它没有直接内容，因此它的宽度为 0，高度为 0。因此，其中另一个尝试添加文本的除法元素继承父级的宽度 0 . 所以它只会扩展到最长单词的宽度以允许内容，然后将其他所有内容换行。完成后，它会从文档流中删除元素，使其自行关闭。

所以，回答您的第一个问题，是的，如果您没有在元素本身上指定宽度和/或高度，那么绝对定位的元素会关注其父元素的尺寸。你知道你孩子的宽度应该是多少吗？

至于您的第二个问题...您可以使用white-space: nowrap。不是一个很好的解决方案。更可取的是，找到一种更好的方式来组织您的内容，这样您就不需要三个绝对定位的元素相互嵌套。你说你必须使用它们……真的吗？更有可能是您还没有找到更好的方法来做这件事，但如果您选择走那条路，那就是另一个问题了。

【讨论】：

是的，空格可以防止自动换行，但是只有在屏幕（即正文）无法容纳它的情况下才可以换行吗？也就是说，让父级的宽度设置为 100% 的效果（尽管我们并没有真正设置它；而是为子级设置一个 CSS 属性）？
@tomyeh：目前我能想到的唯一方法是在元素上设置left: 0; right: 0，然后在设置宽度时删除right 属性。
+1。正在寻找关于绝对定位元素的子元素宽度的解释（与 this thread 有关），但没有找到。我花了很长时间才偶然发现这一点。想知道为什么它在搜索中没有出现更高的位置。是否应该为此接受答案？
非常有价值的解释！ “..扩大到最长单词的宽度以允许内容......”解释了在绝对 div 中呈现的段落如何在每一行中破坏所有单词。谢谢！

【解决方案2】：

如果没有设置固定的width，带有position: absolute 或fixed 的块级元素会自动绑定到其父级的宽度。如果您不想要子元素的固定宽度，您可以通过给它一个非常高的margin-right 来有效地解决这个问题，例如

.inner-div {
    position: absolute;
    margin-right: -10000px;
}

那么它的宽度将绑定到父级的宽度减去负边距，所以实际上只取决于它的内容。

更新小提琴：http://jsfiddle.net/ymgfN/53/

【讨论】：