Question

我正在摆弄我的网络应用程序，试图让div包围一些p元素。结构看起来像这样，即伪代码......

<div id='outer'>
  <p></p>
  <p></p>
  <p></p>
</div>

我发现如果我将外部div设置为

position:absolute;

而不是

position:relative

div只能正确地包裹p个元素。

否则它会一直延伸到页面的右边，我之前不得不手动设置宽度。

这种行为是什么？

此外，p标签使用

display:inline

并且包含div只使用默认显示。

下面的CSS在我的应用程序中运行良好。

// outer div

#mi_control {
    position: absolute;
    left: 580px;
    top: 660px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

// p elements

.menu_bottom {
    margin-left: 18px;
    display: inline;
}

Answer 1

这是一个常见问题..

我quote：

问题：相对div自动采用100％宽度，但绝对div只占用内容宽度。为什么？的

回答：设置position:absolute会从文档结构的正常流程中删除相关元素。因此，除非您明确设置宽度，否则它将无法知道宽度。你可以明确地设置width:100%，如果那是你想要的效果。

Answer 2

默认情况下，div元素设置为display: block;。块元素将是父元素宽度的100％。

当您将元素设置为position: absolute;时，它会将其从文档流中取出，并且元素不再根据父元素进行调整。它可能会弄乱您的布局。

我的建议是将div元素设置为display: inline-block; - 这会根据其内容调整大小，但不会将其从文档流中删除。

#outer
{
    display: inline-block;
}

Answer 3

我不确切知道管理此行为的规则，但您观察到的是正确的行为，并且在所有浏览器中都是一致的。当DIV的位置设置为绝对或固定时，DIV采用最小宽度;否则它需要完全可用的宽度。

Answer 4

width元素的div默认值为auto。

这意味着它将占用可用空间，或者如果内容强制它占用更多空间。但是，如果使用position: absolute，则会从文档流中取出该元素。因为它不再与全宽度相关，它将使用内容强制它使用的宽度。

Answer 5

一旦设置为绝对值，就会将其从正常的内容流中取出。除非另有说明，否则绝对定位的元素始终显示在左上角。该元素也将缩小到只有它的大小，因为这是position:absolute的工作方式

div s的宽度自然为100％，因此您必须手动设置宽度。相对定位的元素与静态定位的元素几乎相同。唯一的区别是如何移动它们

Answer 6

不确定你看到了什么，但即使你的div绝对定位，它仍然会包裹你的P标签

http://jsfiddle.net/8MSDH/

你在右下方看到了它，因为你设置了你的左上角和左边

left: 580px;
top: 660px;

Answer 7

行为受规范约束。绝对定位元素具有关于如何计算宽度的专用规则：http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width和http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

为什么定位效果div宽度？

7 个答案: