logo标签列表

如何根据文本大小调整容器的宽度

javascripthtmlcss
5

我的想法是使带有 .main_content 类的 div 元素中的每个元素的宽度等于其内部文本的宽度。我该怎么做呢？

正如您所看到的，每个元素 (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大小。但是代码太多了。有没有什么聪明的方法可以做到这一点？

2
display:table 并且 支持 很广泛。 - Rainbow
1
在这里，display:table是最好的选择。 - Temani Afif
5个回答
3

您可以尝试以下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>

CSS在IE上运行良好，甚至包括IE8.... - G-Cyrillus
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>

我喜欢它，非常喜欢！！非常感谢！谢谢你的时间！ - Laura
@Laura 没问题，一个被接受的答案会很棒。 - bill.gates
我不知道这个fit-content。它是新的吗？ - Laura
1
在某些浏览器（尤其是Firefox）中需要前缀才能正常工作：https://caniuse.com/#search=fit-content - Láďa Durchánek
1
@Laura，我记得好像是在2017年的时候出现了grid，但我不确定，如果我错了，请有人纠正我。 - bill.gates
1
@LáďaDurchánek 我添加了一个前缀。 - bill.gates
1
在 .main_content 上使用 flexbox： 

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

1

在您的.main_content > *中添加width: max-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>

带有“max-width:100％;”的样式，以某种方式与“fit-content”相似，会很好。 - G-Cyrillus
1
您可以简单地使用：

width: max-content;

对于所有子元素，这将设置每个元素(span, h2, p 和 h6)内部文本的宽度。

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

使用max-width:100％;来实现类似于fit-content的效果是可以的。 - G-Cyrillus
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接