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

Question

我知道关于这个问题还有更多的问题，但我找到的所有解决方案都不符合预期的行为，我不知道我是否有父母出了问题。我有三个"div"，其中包含三条不同的信息，这些信息必须显示在它们自己的行中，父级必须对其应用边框，使所有内容都垂直和水平居中，创建一个包含不同文本的框。通过对每个文本块应用inline block或clear:both和float：left等解决方案，可以根据内容调整宽度，但不会根据父文本调整宽度。尝试对父级执行相同操作不适用。

这是我的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;
}

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

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

我希望你能帮我摆脱错误。我提前感谢你的时间和你的帮助

Answer 1

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

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