如何根据div内文本的大小调整div宽度

Question

我的想法是使divs 中具有该类的每个元素.main_content的宽度等于其中文本的宽度。我该怎么办？

正如您所看到的，每个（span、h2, p和h6）的宽度与 相同.main_content div。红色边框证明了这一点。

那么，如何使每个 div 的宽度适合这些 div 中的文本呢？（仅使用CSS）

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

P：我一直在尝试手动设置每个元素的大小width。但是代码太多了。有什么聪明的方法吗？

Answer 1

只需 1 个 CSS 函数：width: fit-content 此处注意：它在 IE 中不起作用。试试看：

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;

}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: -moz-fit-content;
  width: fit-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>