html - 两个组件的行。如果文本溢出,它应该从 HTML 的左侧开始
问题描述
正如您在图像中突出显示的部分中看到的那样,有两个组件。
- “活”蓝标
- 标题
问题是如果我们使用一行,那么溢出的文本将从第二个组件的起点继续。
我想要的是:我希望溢出的文本从整行的起点开始,例如“实时”标签下的“南非”。
任何解决方案/建议都会有所帮助。谢谢!
解决方案
我会这样做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。
推荐阅读
- android - 将两个数据类绑定到一个片段 - Android Kotlin
- algorithm - 查找 XOR 和为零的数组数量
- google-bigquery - 特殊组成员时的 BigQuery 数据集访问
- mongodb - mongo db 没有在 centos 7 上启动
- python - 是否有计算项目产品价值的循环?
- ios - Vapor 3.1.10 Xcode-11.3.1 编译问题
- javascript - 禁用除 IE 之外的所有浏览器的 HTML5 AppCache
- c - 如何从一个数组中找到每个分支的百分比?在 C 中(已回答)
- zk - 如何在 zk-calendar 中将任何日/周/月设置为默认视图?
- python - 迁移错误“OperationalError at /admin/accounts/userstripe/ no such table:accounts_userstripe”