为什么定位会影响 div 的宽度？答案

【问题标题】：Why does positioning effect div width?为什么定位会影响 div 的宽度？
【发布时间】：2013-07-02 21:54:05
【问题描述】：

我正在摆弄我的网络应用程序，试图让一个 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;
}

【问题讨论】：

您可以给我们任何 CSS 来帮助确定问题吗？
在css中添加，没有问题，我只是问为什么事情会这样，即是什么支配了行为......
你设置了顶部和左侧，所以它被推到了右下角，但它仍然会环绕你的 p 标签
重复问题 - stackoverflow.com/questions/5323177/…

标签： html css

【解决方案1】：

这是一个常见问题..

我quote:

问题：相对 div 自动占用 100% 宽度，但绝对 div 仅占用内容宽度。为什么？

答案：设置position:absolute 会从文档结构的正常流程中删除有问题的元素。因此，除非您明确设置宽度，否则它不会知道宽度。如果这是你想要的效果，你可以显式设置width:100%。

【讨论】：

【解决方案2】：

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

当您将一个元素设置为position: absolute; 时，它会将其从文档流中移除，并且该元素不再根据父元素调整大小。但它可能会影响您的布局。

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

#outer
{
    display: inline-block;
}

【讨论】：

【解决方案3】：

我不确切知道控制这种行为的规则，但您观察到的是正确的行为，并且在所有浏览器中都是一致的。当 DIV 的位置设置为绝对或固定时，DIV 采用最小宽度；否则它会占用完整的可用宽度。

【讨论】：

【解决方案4】：

div 元素的width 的默认值为auto。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

一旦设置为absolute，就会脱离正常的内容流。除非另有说明，否则绝对定位的元素总是出现在左上角。该元素也将缩小到它必须的大小，因为这就是position:absolute 的工作原理

divs 自然有 100% 的宽度，所以你必须手动设置宽度。相对定位元素的行为与静态定位元素几乎相同。唯一的区别是它们的移动方式

【讨论】：

【解决方案7】：

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

http://jsfiddle.net/8MSDH/

您在右下角看到它，因为您设置了顶部和左侧

left: 580px;
top: 660px;

【讨论】：