使外部div的宽度自适应内部div的宽度

Question

我有一个外层div里面有两个内部div，我想让外层div自适应内部div的宽度。这个可行吗？

body {
  font-size: 0;
}
#outer {
  border: 1px solid black;
}
.inner {
  font-size: 12px;
  display: inline-block;
  border: 1px solid red;
}

<div id='outer'>
  <div class='inner'>text1</div>
  <div class='inner'>text2</div>
</div>

- frosty

---

很好的问题，frosty :+1 当创建进度条时很有用。 - Kieran Ryan

Answer 1

你的outer div是一个块级元素。你需要将它变成一个内联元素。内联元素会自动采取其所包含内容的大小。就你提出的问题而言，只需设置：

display: inline-block

在你的外部 div 上加上这段代码即可实现。请参考下面的代码片段进行演示：

  body {
      font-size: 0;
    }
    #outer {
      border: 1px solid black;
        display: inline-block;
    }
    .inner {
      font-size: 12px;
      display: inline-block;
      border: 1px solid red;
    }

<div id='outer'>

  <div class='inner'>
    text1
  </div>
  <div class='inner'>
    text2
  </div>

</div>

希望这能有所帮助！！！

- Satwik Nadkarny

---

但是当空间不足时，内部div换行成两行时，外部div就比内部div更大。如何解决这个问题？ - bersling

那帮助了Satwick的。:+1 - Kieran Ryan

Answer 2

在 #outer 的 CSS 中添加 "display: table;"：

例如：

#outer {
    border: 1px solid black;
    display: table;
}

使用display: table比使用inline更少侵入性

- RyanT

---

五年后，这是最好的答案。我试图修复表格中 td 元素内的一些绝对定位工具提示，但它们没有扩展到 td 的宽度。现在完美了。 - silvered.dragon

Answer 3

如果您将position:absolute;或float:left;添加到#outer，它将根据两个内部的div进行调整大小。对于此示例，我会使用float。 Floats通常更适合可能随时间编辑而更改或扩展/缩小的内容，而absolute positioning应该在文档流或文档结构之外使用，例如导航栏。

编辑：如果您不需要其他元素围绕外部div流动，则下面发布的display:inline-block方法将起作用，但是如果您有要围绕#outer流动的元素，则float:left是正确的方法。假设您将#outer设置为页面宽度的50％，并且希望在页面的另一半上放置其他内容，则使用display:inline-block将使其他元素位于#outer下方。

CodePen链接以显示差异

- DC319