html - 如何让文本位于div的左下角

Question

这是我得到的当前结果

这是 HTML:

<div class="activity_title_hours">
    <div class="activity_title">
        The Gym
    </div>
    <div class="activity_hours">
        - 5 Hours
    </div>
</div>

这是相关的 css:

.activity_title_hours{
    display: flex;
}

.activity_title {
    float: left;
    font-size: 35px;
    text-decoration: underline;
    height: 100%;
    width: 50%
}

.activity_hours {
    float: left;
    font-size: 20px;
    min-height: 100%;
    width: 50%;
    text-align: left;
}

我试图让文本如下所示

健身房 - 5 小时

但“The Gym”有下划线

我已尝试将以下内容添加到我的 activity_hours 类(class)中:

position: absolute;
bottom: 0;
left: 0;

Answer 1

无需宽度或 float 样式，只需使用父级的 flex 属性进行对齐或定位

.activity_title_hours{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

.activity_title {
    font-size: 35px;
    line-height: 40px;
    text-decoration: underline;
}

.activity_hours {
    font-size: 20px;
    line-height: 40px;
}