如何使用其中的文本大小调整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 {&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; font-weight: 800;}.main_content>* {&nbsp; border: 1px solid red;&nbsp; display: table;&nbsp; margin: 0 auto;&nbsp; margin-bottom: 30px;&nbsp; text-align: center;}<div class="first_article">&nbsp; <div class="first_content">&nbsp; &nbsp; <div class="main_content">&nbsp; &nbsp; &nbsp; <span class="growth">Growth</span>&nbsp; &nbsp; &nbsp; <h2>5 compelling user referral campaign examples</h2>&nbsp; &nbsp; &nbsp; <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; <h6>Author</h6>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

只有1个CSS函数：注意：它在IE中不起作用。试试看：width: fit-content.main_content {&nbsp; &nbsp;width: 100%;&nbsp; height: 400px;&nbsp; font-weight: 800;}.main_content > * {&nbsp; border: 1px solid red;&nbsp; display: block;&nbsp; margin-bottom: 30px;&nbsp; text-align: center;&nbsp;&nbsp; width: -moz-fit-content;&nbsp; width: fit-content;}<div class="first_article">&nbsp; <div class="first_content">&nbsp; &nbsp; <div class="main_content">&nbsp; &nbsp; &nbsp; &nbsp;<span class="growth">Growth</span>&nbsp; &nbsp; &nbsp; &nbsp;<h2>5 compelling user referral campaign examples</h2>&nbsp; &nbsp; &nbsp; &nbsp;<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.&nbsp; &nbsp; &nbsp; &nbsp;</p>&nbsp; &nbsp; &nbsp; &nbsp;<h6>Author</h6>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

在以下位置使用 flexbox：.main_content.main_content {&nbsp; &nbsp;width: 100%;&nbsp; height: 400px;&nbsp; font-weight: 800;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;}.main_content > * {&nbsp; border: 1px solid red;&nbsp; margin-bottom: 30px;&nbsp; text-align: center;&nbsp;}<div class="first_article">&nbsp; <div class="first_content">&nbsp; &nbsp; <div class="main_content">&nbsp; &nbsp; &nbsp; &nbsp;<span class="growth">Growth</span>&nbsp; &nbsp; &nbsp; &nbsp;<h2>5 compelling user referral campaign examples</h2>&nbsp; &nbsp; &nbsp; &nbsp;<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.&nbsp; &nbsp; &nbsp; &nbsp;</p>&nbsp; &nbsp; &nbsp; &nbsp;<h6>Author</h6>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 4

添加到您的 .width: max-content.main_content > * {.main_content {&nbsp; &nbsp;width: 100%;&nbsp; height: 400px;&nbsp; font-weight: 800;}.main_content > * {&nbsp; border: 1px solid red;&nbsp; display: block;&nbsp; margin-bottom: 30px;&nbsp; text-align: center;&nbsp; width: max-content;}<div class="first_article">&nbsp; <div class="first_content">&nbsp; &nbsp; <div class="main_content">&nbsp; &nbsp; &nbsp; &nbsp;<span class="growth">Growth</span>&nbsp; &nbsp; &nbsp; &nbsp;<h2>5 compelling user referral campaign examples</h2>&nbsp; &nbsp; &nbsp; &nbsp;<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.&nbsp; &nbsp; &nbsp; &nbsp;</p>&nbsp; &nbsp; &nbsp; &nbsp;<h6>Author</h6>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 5

您只需使用：width: max-content;对于所有子元素，这将设置其中文本的每个（，，和）宽度的with。spanh2ph6.main_content {&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; font-weight: 800;}.main_content>* {&nbsp; border: 1px solid red;&nbsp; display: block;&nbsp; margin-bottom: 30px;&nbsp; text-align: center;&nbsp;&nbsp; width: max-content;}<div class="first_article">&nbsp; <div class="first_content">&nbsp; &nbsp; <div class="main_content">&nbsp; &nbsp; &nbsp; <span class="growth">Growth</span>&nbsp; &nbsp; &nbsp; <h2>5 compelling user referral campaign examples</h2>&nbsp; &nbsp; &nbsp; <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; <h6>Author</h6>&nbsp; &nbsp; </div>&nbsp; </div></div>