html - 使外部div的宽度自动适合内部div

Question

我在一个外部 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>

Answer 1

您的外部 div 是一个 block 级元素。您需要使它成为一个内联级元素。 Inline 元素自动采用它包含的内容的大小。根据您提出的问题，只需设置:

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>

希望这有帮助!!!