如何解决两个组件的行如果文本溢出,它应该从 HTML 中的左侧开始
如您在图像中突出显示的部分所见,有两个组件。
- “直播”蓝标
- 标题
问题是如果我们使用一行,那么溢出的文本会从第二个组件的起点继续。
我想要的是:我希望溢出的文本从整行的起点开始,就像“Live”标签下的“南非”一样。
任何解决方案/建议都会有所帮助。谢谢!
解决方法
我会使用 display: flex;
(还有:flex-direction: column;
)并设置最大宽度以避免文本继续在活动标签后面:
#everthing{
height: 700px;
width: 250px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#title{
height: 100px;
width: 250px;
display: flex;
flex-direction: column;
align-items: start;
}
<div id="everything">
<img src="" alt="Main picture">
<div id="title">
<img src="" alt="Live">
<span>Your Title</span>
</div>
</div>
现在您只需插入缺失的数据和您喜欢的高度或宽度。对我来说,效果很好。我为 Live-Label 使用了图像,但应该可以使用 div。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。