未指定宽度的div元素（绝对定位）

Question

我正在处理一个绝对定位的div，为了能在页面上找到它，我在里面放置了一些文本，具体来说：

<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>

文字换行了，即"Example"和"Text"在不同行。 在我的Firefox浏览器中没有滚动条显示，实际宽度约为1000px。 必须在div上设置宽度吗？它们不会扩展以容纳其内容吗？

如果有帮助的话，我在此处包含了该元素的Firebug CSS输出：

element.style {
      font-size: 30px;
      left: 500px;
      position: absolute;
      top: 10px;
}
html * {
    margin: 0;
}              //  main.css (line 1)

Inherited from body:

body {
    color: #333333;
    font: 11px verdana,arial,helvetica,sans-serif;
}

谢谢

- Ray

---

我无法重现这个问题。我们能看到其他代码吗？这个位置是否使得该DIV靠近另一个项目，导致文本换行？ - Yeodave

Answer 1

尝试添加：

white-space: nowrap;

在您的固定定位div中。需要注意的是，此解决方案不会在div小于窗口宽度时使行换行。

- Spiros Martzoukos

---

哇，我也遇到了同样的问题，这个简单的答案解决了我的问题。谢谢Spiros！ - Marty Cortez

当你看到解决方案时，其中一些事情似乎是如此显而易见。谢谢，Spiros！ - Chris

可以运行了！太棒了！ - daniyalahmad

不知道我是怎么到这里来的，但你的解决方案解决了我的问题！谢谢。 - C0ZEN

谢谢您，亲切的先生。 - Joshua Russell

Answer 2

块级元素在纵向上会根据其内容扩展大小，但在横向上会填充其容器。然而，由于使用了绝对定位，因此“填充容器”的语义有所改变。

通常情况下，如果未指定宽度（或者宽度为“auto”即默认宽度），浏览器会尝试填充浏览器中剩余的水平空间，因此你所描述的行为听起来有些奇怪。最有可能的是，其他某个元素正在影响该元素，从而导致这种行为（例如，父元素链中的相对或绝对定位元素）。

我建议通过尝试使用根级div来调试此问题（如果您还没有这样做），以消除父元素引起问题的可能性。

- jmar777

---

Jmar，感谢您的解释。我在父级链中有一个相对定位的div。原因是我希望这个绝对div以偏移量的方式定位在页面上与内容相对应。也许我的定位方法不正确？我有一些东西想使用普通和浮动定位来显示，然后在同一组东西中（读取div），我有一些想要出现在那个位置的内容（而不使用边距等）。 - Ray

很难在没有看到完整的父级链的情况下提供更具体的建议，但是可以尝试一下，是否由于相对定位的父级div的宽度而导致文本换行？如果是这样，您可以使用负边距进行一些hacky操作以超出该div的边界，但是您最好重新考虑您正在使用的整体DOM结构。 - jmar777

如果我取消父元素的相对定位，那么文字就不会换行。但是，这个元素就会偏离浏览器的 0-0 点，这不是我想要的。也就是说，我的页面上有一个带菜单的标题，每个页面都重复出现。我想要绝对定位与其相关，使元素正确定位，即使“标题材料”被更改了。 - Ray

由于这种结构，您将需要使用显式宽度。如果不使用显式宽度（例如300像素），则宽度将由容器确定。由于该容器似乎必须作为偏移容器，因此将无法根据浏览器的宽度设置绝对定位div的宽度。当然，您可以借助JavaScript的帮助动态调整其大小，但如果可以避免，则有点讨厌。 - jmar777

对于寻找视觉帮助的人，您可以查看此代码片段：https://codepen.io/khs/pen/vemJEx根据我的发现，如果您想在绝对定位元素中嵌套类似表格的结构，并且希望绝对定位元素扩展，则最好使用表格而不是 flex-box。当然，如果您想要，可以使用white-space:nowrap，但如果您正在使用 flexboxes，则它对您没有帮助。 - kumarharsh

Answer 3

在绝对定位元素上添加：

display: table;

.rel {
  position: relative;
  background-color: rgb(85 85 85 / 20%);
}

.abs {
  position: absolute;
  background-color: rgb(0 255 0 / 50%);
}

.table {
  display: table;
}

.fixed {
  position: fixed;
  background-color: rgb(3 169 244 / 46%);
}

div {
  font: 14px italic, sans-serif;
  border-radius: 5px;
  margin: 1em;
  padding: 1.5em;
  font-style: italic;
  border: 3px solid rgba(155, 155, 155, .4);
}

p {
  font-style: normal;
}

<div class="rel">(Relative Positioning)
  <div class="abs table">(Absolute Positioning; Display "table")
    <div class="fixed">(Fixed Positioning)<br/>
      <strong>Self-Sizing Popout Content</strong>
      <p>The width of this block expands based on content size, and escapes the bounds of its parent, yet its starting position is based on its location in the containing parent. This method of positioning can be used for popups that need to be anchored
        in a particular spot. </p>
      <div class="rel">(Relative Positioning)
        <div class="abs table">(Absolute Positioning; Display "table")<br/>
          <div class="fixed">(Fixed Positioning)
            <p><strong>
Now we're getting ridiculous
</strong><br/> A popup in a popup.<br/> This box expands based<br/> on content height &amp; width.
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

- Benson

---

这对我有用，而 white-space: nowrap 没有。 - kmoser

如果存在一个带有position:relative的父元素，则此方法无效。表格的最大自动宽度将是相对元素的宽度。 - Steven Vachon

如果父级位置是相对的，您需要使用固定定位的div来包含自动扩展内容（仅在祖先为相对且父级为绝对时有效）。例如：<div style="position:relative;"><div style=position:absolute;display:table;"><div style="position:fixed;">我的自动调整大小的内容</div></div></div> 在https://jsfiddle.net/bensontrent/qq2ahmf2/上查看概念证明。 - Benson

这在 WebKit 和 IE 浏览器中完美运行... 但似乎在 Firefox 上无法工作。 - kayee

@Benson，你真是救命恩人！ - Christopher Bradshaw

Answer 4

尝试使用CSS属性“width: fit-content;”或“width: max-content;”，可以让内容水平扩展。

- Zvezdochka

Answer 5

我有一个解决方案：

<style>

html * {
        margin: 0;
    }     

    body {
        color: #333333;
        font: 11px verdana,arial,helvetica,sans-serif;
    }

    #a1{
        position: relative;
        margin:10px;
        border:1px solid black;
        overflow:hidden;
    }

    #a1 img{
            max-width:700px;
    }

    #a2{
        position: absolute;
        right:5%;
        bottom:5%;
        border:1px solid white;
        color:#fff;
        font-size:2em;
        background:rgba(0,0,0,0.7);
        padding:10px;
    }
</style>
<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

http://jsfiddle.net/2hynguq9/2/

可调整宽度以适应 div，灵活自如

- Aztek4

Answer 6

对我来说它实际上运行良好。但是尝试将 display: inline; 添加到 div 中。

- cycero

---

Cycero，感谢您的回应。我添加了"display:inline"，但没有任何效果。请查看我添加到@jmar777评论中的内容。 - Ray

Answer 7

我通过添加一个包装 div 来解决这个问题，该 div 也是绝对定位的，并具有我希望我的 div 扩展到的宽度。

E.g.,

<div class="wrapper">
    <div class="my-div"></div>
</div>

还有 CSS，

.wrapper {
    position: absolute;
    width: 500px;
}

.my-div {
    position: absolute;
    whitespace: pre-wrap;
}

您可以添加 whitespace: pre-wrap 以允许换行，这使得它比 nowrap 解决方案更加灵活。

- jahooma

Answer 8

尝试在 div 上使用 "width:auto" 的 css 属性 :)

- Graeme Leighfield

---

width:auto没有效果，但我可以添加width:100%来实现。但是我正在尝试理解div宽度的工作原理。 - Ray