1

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

7 回答 7

1

这是一个常见的问题。。

我引用：

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

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

于 2013-07-04T20:59:48.897 回答
1

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

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

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

#outer
{
    display: inline-block;
}
于 2013-07-04T20:59:51.293 回答
1

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

于 2013-07-04T21:00:07.587 回答
1

元素width的默认值为。divauto

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

于 2013-07-04T21:02:30.710 回答
0

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

于 2013-07-04T21:07:30.437 回答
0

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

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

于 2013-07-04T21:02:06.133 回答
0

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

http://jsfiddle.net/8MSDH/

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

left: 580px;
top: 660px;
于 2013-07-04T21:04:35.017 回答