当 'clear:both' 和 'float:left' 不符合预期时，如何将 div 的宽度调整为其内容？

Question

我知道关于这个问题还有更多问题，但我找到的所有解决方案都不符合预期的行为，我不知道 parent 之一是否有问题。我有三个 'divs'，其中包含三个不同的信息，必须在它们自己的行中显示，并且 parent 必须对其应用边框，使所有内容在垂直和水平方向上居中，创建一个框不同的文本。通过对每个文本块应用 inline-block 或 clear:both 和 float:left 等解决方案，宽度会根据内容进行调整，但不会根据 parent 进行调整。尝试在 parent 上做同样的事情并不适用。

这是我的 html


<div class="service-options">
    <div class="from-group">
        <h1 class="animal-title">testing inline-block</h1>
        <div class="list-services">
            <div class='column-service'>
                <div class="service-name">
                    online
                </div>
                <div class="service-description">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </div>
                <div class="service-price">
                    100<span class="pricecurrency">€</span>
                </div>
            </div>
            <div class='column-service'>
                <div class="service-name">
                    store
                </div>
                <div class="service-description">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </div>
                <div class="service-price">
                    200<span class="pricecurrency">€</span>
                </div>
            </div>
            <div class='column-service'>
                <div class="service-name">
                    postal service
                </div>
                <div class="service-description">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </div>
                <div class="service-price">
                    150<span class="pricecurrency">€</span>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 css。

.animal-title {
  padding: 45px 0 45px 60px;
  color: #666B74;
  font-family: 'RalewayRegular';
  font-weight: bold;
  font-size: 36px;
}
.column-service {
  border: 3px solid #D53865;
 }

.list-services {
  display: flex;
  justify-content: space-around;
  padding: 45px 0 0 60px;
}

.service-name {
  clear: both;
  float: left;
  
  font-size: 20px;
  color: #D53865;
  font-weight: bold;
  font-family: 'RalewayRegular';
}

.service-description {
  clear: both;
  float: left;
  
  font-size: 16px;
  color: #666b74;
  font-family: 'RalewayRegular';
  width: 50%;
}

.service-price {
  clear: both;
  float: left;
  font-size: 22px;
  color: #D53865;
  font-weight: bold;
}

.price-currency {
  font-weight: normal;
}

我留下一个代码笔link让你看看当前的行为

https://codepen.io/CharlieJS/pen/GRZqbGB

我希望你能帮助我走出我的错误。提前感谢您的宝贵时间和帮助

Answer 1

您已将 .service-description 的宽度设置为 width: 50%。 50% 是指宽度的一半，因此不允许容器相应地收缩。

如果要调整段落的宽度，应在容器上设置宽度，以便内容自动调整大小或为栏服务添加边距。

当 'clear:both' 和 'float:left' 不符合预期时，如何将 div 的宽度调整为其内容？

how to adjust the width of a div to its content when 'clear:both' and 'float:left' do not meet expectations?

html

css

width

css-float

vue.js