如何使用其中的文本大小调整div宽度

Question

我的想法是使s中具有类的每个元素的宽度等于其中文本的宽度。我该怎么做？div.main_content如您所见，每个 （和 ） 的宽度与 .红色边框说明了这一点。spanh2,ph6.main_contentdiv那么，如何使每个 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：我一直在尝试手动设置每个元素的大小。但是代码太多了。有什么聪明的方法可以做到这一点吗？widt

Answer 1

你可以尝试使用下面的css，看看它是否有效。

.main_content {

  width: 100%;

  height: 400px;

  font-weight: 800;

}

.main_content>* {

  border: 1px solid red;

  display: table;

  margin: 0 auto;

  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>

Answer 2

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

.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>

Answer 3

在以下位置使用 flexbox：.main_content

.main_content {

   width: 100%;

  height: 400px;

  font-weight: 800;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.main_content > * {

  border: 1px solid red;

  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>

Answer 4

添加到您的 .width: max-content.main_content > * {

.main_content {

   width: 100%;

  height: 400px;

  font-weight: 800;

}

.main_content > * {

  border: 1px solid red;

  display: block;

  margin-bottom: 30px;

  text-align: center;

  width: max-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>

Answer 5

您只需使用：

width: max-content;

对于所有子元素，这将设置其中文本的每个（，，和）宽度的with。spanh2ph6

.main_content {

  width: 100%;

  height: 400px;

  font-weight: 800;

}

.main_content>* {

  border: 1px solid red;

  display: block;

  margin-bottom: 30px;

  text-align: center; 

  width: max-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>