Question

我这里有一个框，要求宽度更改为文本的宽度。唯一的问题是我不能使用float：right;这将解决这个问题，因为我不能将它用于我正在构建的php应用程序。我怎样才能改变宽度？我使用margin-left: auto;来解决它停留在右边的问题，但宽度保持在我设置的最大宽度。我不能使用浮动问题。我该怎么办呢？我在代码中阻止了浮动，但是如果你激活它并阻止margin-left: auto;，你会看到我的意思。

基本上，如果框中的文字较少，则其宽度将小于文字较多时的宽度。

<style>
* {
    margin: 0;
    padding: 0;
}
.gBoxTall {
    background-color:#0C9;
    clear: both;
    margin-left: auto;
    /* float: right; */
    margin-top: 15px;
    max-width: 270px;
    padding-left: 22px;
}
.gBoxTall .right {
    background-color:#0C9;
}
.gBoxTall .right p {
    margin-left: -5px;
    padding: 8px 30px 0 0;
}
.gBoxTall .bottom {
    background-color:#0C9;
    height: 20px;
    margin: -10px 0 0 -22px;
}
.gBoxTall .bottom .right {
    background-color:#0C9;
    float: right;
    height: 20px;
    width: 43px;
}
</style>
<div class="gBoxTall">
  <div class="right">
    <p class="message">My name is Earl.</p>
  </div>
  <div class="bottom">
    <div class="right"></div>
  </div>
</div>

Answer 1

您可以尝试How to make div not larger than its contents?建议的内容 - 例如使用display:inline-block并且不要使用width属性。

无法获得宽度更改自动（不能使用浮动）

1 个答案: