如何解决当“ clear:both”和“ float:left”不符合预期时,如何将div的宽度调整为其内容?
我知道关于此问题还有更多问题,但是我发现的所有解决方案都不符合预期的行为,而且我不知道我的一位父母是否有问题。 我有三个“ div”,其中包含必须在自己的行中显示的三个不同的信息,并且父级必须对其应用边框,以使所有内容在垂直和水平方向上都居中,从而创建一个包含不同文本的框。 通过将inline-block或clear:both和float:这样的解决方案应用到每个文本块,可将宽度调整为适合内容,而不调整为父元素。 尝试对父级执行相同操作不适用。
这是我的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;
}
我留下一个codepen链接供您查看当前行为
https://codepen.io/CharlieJS/pen/GRZqbGB
希望您可以帮助我摆脱错误。我先感谢您的时间和帮助
解决方法
您已将.service-description
的宽度设置为width: 50%
。 50%表示宽度的一半,因此不允许容器相应地收缩。
如果要调整段落的宽度,则应在容器上设置宽度,以便自动调整内容的大小或为列服务增加边距。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。