Question

所以我遇到的问题是我有多个Div都应用了相同的类（“Text”）我没有为这些div设置宽度或高度并允许它们自动调整大小它们中的文本（当然宽度不一）。不幸的是，当我这样做时，任何使用我的相同“Text”类的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占用该空间。

要解决此问题，您可以像这样设置CSS：

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

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

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

1 个答案: