调整Div的大小以适合不同的文本

Sizing a Div to fit different Text

本文关键字：文本 Div 调整      更新时间：2023-09-26

所以我的问题是，我有多个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>

DIV标签的默认CSS为display: block, position: static;。这使得DIV标签占用其容器的全部宽度。在您的示例中，容器的宽度足以容纳最长的DIV，并且所有的DIV都占用了该空间。

要解决这个问题，你可以这样设置你的CSS: 
.Text{
   display: inline-block;
   background-color: teal;
   padding: 7px;
   margin: auto;
}

您可能需要使用<BR />标记来强制使用新行，但我看到您已经在这样做了。

相关文章：