使外部div的宽度自动适合内部div [英] Make the width of outer div to fit inner divs automatically

问题描述

我在外部div内有2个内部div，我想使外部div自动适应内部div的宽度。

I have 2 inner divs inside an outer div, and I want to make the outer div to automatically fit to the width of the inner divs. Is that possible?

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>

推荐答案

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

Your outer div is a block-level element. You need to make it an inline-level element. Inline elements automatically take the size of the content it contains. In terms of the question you've asked, just setting :

display: inline-block

外层div可以解决问题。有关演示，请参见下面的代码段：

on your outer div will do the trick. See the code snippet below for the demo :

  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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！