使外部 div 的宽度自动适应内部 div答案

【问题标题】：Make the width of outer div to fit inner divs automatically使外部 div 的宽度自动适应内部 div
【发布时间】：2015-10-09 11:22:46
【问题描述】：

我在一个外部 div 中有 2 个内部 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>

【问题讨论】：

好问题冷冰冰：+1 在创建进度条时有用了解

标签： html css

【解决方案1】：

您的outer div 是一个块级元素。您需要将其设为内联级元素。 Inline 元素自动采用其包含的内容的大小。就您提出的问题而言，只需设置：

display: inline-block

在你的外层 div 上就可以了。参见下面的代码 sn-p 进行演示：

  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>

希望对你有帮助！！！

【讨论】：

但是当没有足够的空间，并且内部 div 换成两行时，外部 div 比内部 div 大。如何更改？
帮助了 Satwick :+1

【解决方案2】：

添加“显示：表格；”到#outer css：

例如：

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

使用显示：表格不如使用内联

【讨论】：

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

【解决方案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 link to show difference

【讨论】：