JSFiddle示例

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

但带有下划线的“健身房”

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

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

Answer 1

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

Answer 2

在这种情况下，我认为inline-block显示将为您带来更好的结果。

.activity_title_hours {
    display: block; /* Or simply remove this style block. */
}

.activity_title,
.activity_hours {
    display: inline-block;
}

.activity_title {
    font-size: 35px;
    text-decoration: underline;
}   

.activity_hours {
    font-size: 20px;
}

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

Answer 3

如果为两个div都设置了相同的line-height，则文本将彼此相邻。

通过将以下内容添加到活动时间类别中，您可以将div（以绝对方式）与左下方对齐。

我的回答是对您的原始代码进行了最小的更改。但是您可以通过更改html / css来获得更好的解决方案。

position: absolute;
bottom: 0px;
left: 0px;
width: 300px;

.activity_title_hours{
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 300px;
}

.activity_title {
    float: left;
    font-size: 35px;
    line-height: 40px;
    text-decoration: underline;
    height: 100%;
    width: 50%
}

.activity_hours {
    float: left;
    font-size: 20px;
    line-height: 40px;
    min-height: 100%;
    width: 50%;
    text-align: left;
}

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

Answer 4

如果只想在句子的下划线加上下划线，可以使用span。默认情况下，此元素设置为display:inline，并且在使用时不会更改文本格式。您可以将CSS应用于此元素，例如text-decoration:underline。如果div的其余部分为空，则可以使用padding在左下角输入文本。

.activity_title_hours{
    font-size: 35px;
    background: red;
    padding: 50px 50px 10px 10px;
}

.activity_title {
    text-decoration: underline;
}

<div class="activity_title_hours">
    <span class="activity_title">
        The Gym 
    </span>
    &nbsp;- 5 Hours
</div>

Answer 5

我能看到的最简单的解决方案是设置margin-top: auto。您只需要在文本上加上其他内容即可 div

JSFiddle示例

https://jsfiddle.net/oq0nk7w2/

CSS

.activity_title_hours{
    display: flex;
    flex-direction:column;
    height: 200px;
    background: red;
}
.bottom-container{
    margin-top: auto;
}

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

.activity_hours {
    font-size: 20px;
}

HTML

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

Answer 6

Flexbox可以做到这一点。

.activity_title_hours {
  height: 50vh;
  display: flex;
  background: lightblue;
  align-items: flex-end;
}

.activity_title {
  font-size: 35px;
  text-decoration: underline;
}

.activity_hours {
  font-size: 20px;
  line-height: 35px;
  text-align: left;
}

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

Answer 7

如果要在中心位置或对齐项目中将**display: flex; align-items: center; **添加到 .activity_hours ：flex-end;定位在底部。或者，您可以在* .activity_hours中使用padding-top定位。

如何使文本位于div的左下角

7 个答案:

JSFiddle示例

CSS

HTML