javascript - 调整 Div 大小以适应不同的文本

Question

所以我遇到的问题是我有多个 Div 都应用了相同的类(“文本”)我没有为这些 div 设置宽度或高度并允许它们自动调整大小其中的文本(当然宽度不同)。不幸的是，当我这样做时，任何其他使用相同“文本”类的 div 都占用了其中包含最多文本的 div 的宽度。有什么方法可以使用 CSS 或 Javascript 自动将每个 Div 的宽度自动调整为其中的特定文本？ (无需手动为每个 div 指定宽度)。

CSS

.Text{
   background-color: teal;
   padding: 7px;
   margin: auto;
}

HTML

<div class="Text">
     <h1>This is Some Text</h1>
</div>

<br />

<div class="Text">
     <h1>This is More Text only longer than the first</h1>
</div>

Answer 1

DIV 的默认 CSS标签是 display: block, position: static; .这使得 DIV标签占据其容器的整个宽度。在您的情况下，容器足够宽以包含最长的 DIV , 以及所有 DIV s 正在占用那个空间。

要解决这个问题，您可以像这样设置您的 CSS:

.Text{
   display: inline-block;
   background-color: teal;
   padding: 7px;
   margin: auto;
}

您可能需要使用 <BR />标签强制换行，但我看到你已经这样做了。