Question

我希望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吗？

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

Answer 1

元素在从文档流中删除之前获取其宽度和高度。当你绝对定位外部元素时，它会从流中删除，因为它没有直接内容，它的宽度为0，高度为0.因此，其中的另一个分割元素试图添加文本继承父元素的宽度为0所以它只会扩展到允许内容的最长单词的宽度，然后将其他所有内容分解为新行。在完成之后，它会将文档流中的元素自行删除。

因此，要回答您的第一个问题，是，如果您未在元素本身上指定宽度和/或高度，则绝对定位的元素会注意其父元素的尺寸。你知道孩子的宽度应该是多少吗？

至于你的第二个问题......你可以使用white-space: nowrap。不是一个很好的解决方案。更优选地，找到更好的方式来组织您的内容，这样您就不需要三个绝对定位的元素彼此嵌套。你说你有使用它们......真的吗？你更有可能没有找到更好的方法来做到这一点，但如果你选择沿着这条路走下去，这就是另一个问题。

Answer 2

如果未设置固定position: absolute，则fixed或width的块级元素会自动绑定到其父级宽度。如果您不希望子元素具有固定宽度，则可以通过赋予它非常高的margin-right来有效地解决此问题，例如

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

然后它的宽度将绑定到父级的宽度减去负边距，因此实际上只取决于其内容。

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

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

2 个答案: