为什么绝对定位的div在相对定位时会改变宽度？答案

【问题标题】：Why does absolutely positioned div change width when making it relatively positioned?为什么绝对定位的div在相对定位时会改变宽度？
【发布时间】：2012-05-14 14:10:35
【问题描述】：

我有一个 div 显示一些文本并且绝对定位在页面上。虽然它是绝对定位的，但 div 的大小刚好足以显示它包含的文本。当我给那个div添加一个内联样式来改变它相对定位时，div的宽度突然扩大到占据页面的100%...

我使用 Chrome 开发工具来打开/关闭相对位置。关闭它会导致宽度正确，重新打开它会导致 div 扩展。它是一种内联样式，因此没有任何 CSS 类或选择器会改变我的宽度。

我在 Firefox 中遇到了同样的问题。在 Firebug 中删除 position: relative 会导致宽度缩小到刚好足以容纳文本。

【问题讨论】：

Position Relative vs Position Absolute? 的可能重复项
查看stackoverflow.com/questions/5323177/…
@sandeep 感谢您的链接。有没有办法让相对定位的元素根据其内容来调整大小？
你可以给你的 DIV 提供 float、display:inline 或 display:inline-block
@sandeep inline-block 运行良好。谢啦。如果您将其发布为答案，我会为您接受。

标签： html css width css-position

【解决方案1】：

能否请您发布 HTML 和 CSS，我可以看看它.. 同时你可能想看看 Position an HTML element relative to its container using CSS 看看能不能帮到你？

【讨论】：

【解决方案2】：

要随着内容的增长/缩小而改变大小，请使用以下内容：

<div style="min-height:30px;max-height:300px;">

这意味着它会根据内容在 30 到 300 像素之间变化

或

<div style="min-height:30px;height:auto;">

这将在 30 像素和其容器允许的大小之间变化（基本上是永远）

【讨论】：

【解决方案3】：

如果你想relative位置DIV取他的内容宽度，那么你可以给你的DIVfloat，display:inline或display:inline-block

【讨论】：