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

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

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

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

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

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