当文本和图标对齐到同一行时，自定义卡片组件没有响应
提问于 2019-09-11 23:43:24
我已经制作了我自己的自定义卡组件，从零开始学习CSS和HTML。
这是我的HTML代码：
<div class="col-12">
<div>
<div class="search-event-block">
<div class="search-event-icon-left">
<i class="icon-horse search-event-icon-left-size"></i>
</div>
<div class="search-event-block-inner">
<div class="search-event-block-title">
<label class="search-event-block-padding ">Title</label>
</div>
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
</div>
<div class="search-event-block-links ">
<label class="search-event-block-padding">Go block | Delete block</label>
</div>
</div>
</div>
</div>
</div>这是我为卡片组件设计css样式的代码：
.search-event-block {
height: 87px;
margin-top: 10px;
background-color: #fff;
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-title {
font-size: 1.1rem;
font-weight: bold;
margin-top: 11px;
}
.search-event-block-subtitle {
font-size: 0.8rem;
}
.search-event-block-links {
color: #2E85DE;
cursor: pointer;
padding-top: 6px;
font-size: 0.8rem;
}
.search-event-icon-left {
background-color: #F2F3F7;
height: 87px;
width: 74px;
padding-top: 18px;
padding-left: 13px;
}
.search-event-icon-right {
font-size: 18px;
display: inline-block;
padding-top: 30px;
padding-right: 5px;
overflow: hidden;
}
.search-event-icon-left-size {
font-size: 33px;
color: #214A96;
}
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
padding-left: 84px;
}
.search-event-block-padding {
padding-left: 20px;
margin-bottom: 0px;
}问题就在课堂上：search-event-block-subtitle。我想要副标题和图标在同一行。图标必须与卡片的末尾对齐。这很好，但是当我调整窗口的大小时，图标就会在下出现在的副标题下。当屏幕变小时，我希望图标与副标题保持在同一行上。
我只对科尔和行使用引导。我试过这样做：
<div class="row">
//col6
label
//col6
icon
</div>这对我没用
当屏幕变小时，如何使字幕和图标对齐？
我也有问题的高度，它没有自动缩放。我怎样才能解决这个问题？
我做了个小把戏：
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-12 00:15:34
第一步是更新字幕层如下：
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle</label>
<i class="icon-basket search-event-icon-right-size"></i>
</div>这将使字幕文本与图标分开，并使您更好地控制它。然后在css中添加以下类：
.search-event-block-subtitle label {
width: calc(100% - 84px);
display: inline-block;
}并将“搜索-事件-图标-合适大小”类更新为：
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
width: 60px;
display: inline-block;
vertical-align: top;
}搜索事件块字幕标签中的宽度计算为100% - 84px，因为您应该减去图标的宽度和搜索事件块字幕标签填充。您应该根据要使用的图标的实际大小调整这些数字。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57901970
复制相关文章
点击加载更多
腾讯云开发者
