Question

我在外部div中有2个内部div，我想让外部div自动适应内部div的宽度。这可能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

display: inline-block

你的外部div上的

就可以了。有关演示的信息，请参阅下面的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助!!!

Answer 2

添加“display：table;”到#outer css：

例如：

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

使用display：table比使用inline

更具侵入性

Answer 3

如果您将position:absolute;或float:left;添加到#outer，则会将其大小调整为两个内部div。对于这个例子，我会使用float。对于可能随着时间的推移而改变或扩展/缩小的内容，Floats通常会更好，而absolute positioning应该在文档流或文档结构之外使用，例如导航栏。

编辑：如果您不需要其他元素在外部div周围流动，则下面发布的display:inline-block方法将有效，但如果您有要素流动的元素{{1那么#outer将是你要走的路。假设您将float:left作为宽度的50％，并希望使用#outer在页面的另一半上显示其他内容，则会将其他元素放在display:inline-block下方。

CodePen link to show difference

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

3 个答案: