javascript - 当文本和图标在同一行对齐时，自定义卡片组件无响应

Question

我制作了自己的自定义卡片组件以从头开始学习 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。我希望字幕和图标在同一行。图标必须与卡片的末端对齐。这工作正常，但是当我调整窗口大小时，图标在副标题的下方。当屏幕变小时，我希望图标仍然与字幕保持在同一行。

我只对列和行使用 Bootstrap 。我试过这样的事情:

<div class="row">
//col6
label
//col6
icon
</div>

这对我不起作用

当屏幕变小时，如何将字幕和图标对齐在同一行？

我也遇到了高度无法自动缩放的问题。我该如何解决这个问题？

我做了一个jsfiddle:

https://jsfiddle.net/ptyagcdq/1/

Answer 1

第一步是将字幕层更新为:

<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”类更新为:

.search-event-icon-right-size {
    font-size: 21px;
    color: #1B4593;
    width: 60px;
    display: inline-block;
    vertical-align: top;
}

search-event-block-subtitle 标签的宽度计算为 100% - 84px，因为您应该减去图标的宽度和 search-event-block-subtitle 标签的内边距。您应该将这些数字调整为您将要使用的图标的实际大小。

希望对您有所帮助。