html - 如何使文本位于div的左下 Angular

这是我得到的当前结果


这是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小时

但要强调“健身房”

我尝试将以下内容添加到我的activity_hours类中：

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

最佳答案

不需要宽度或浮动样式，只需对父级使用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;
}

关于html - 如何使文本位于div的左下 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53340733/