将文本与 div 中填充的右下角对齐

Question

大家好，我是新来的，刚开始学习HTML和CSS。

我正在尝试对齐"3%"文本，以便它在填充区域内向上推到右下角。

https://i.stack.imgur.com/6zHPW.png

我在这里找到了有关如何在div 中执行此操作的结果，其中涉及以下内容：

.parent div{
position: relative;
}
.child div{
position: absolute;
bottom: 0;
right:0;
} 

它运行良好，但不幸的是，它将文本对齐到整个div 的右下角，我只希望它正好靠在填充区域。

我已经包含了问题的图片以及该部分的HTML和CSS。我也在使用 Bootstrap 和他们的卡实用程序，如果这有什么不同的话。

任何帮助都非常感谢:)

.HTML

<div class="col-12 col-sm-4 col-lg-3 d-flex justify-content-center">
<div class="card border-0" style="width: 14rem; height: 7rem;">
<div class="card-body">
<div class="bump">
<span class="overview_pageviews">Page Views</span>
<img src="images/icon-facebook.svg" class="icon" alt="" style="float: right"><br>
</div>
<h4>87</h4>
<span class="green_font" style="float: right;"><img src="images/icon-up.svg" alt="">3%</span>
</div>
</div>
</div>

.CSS

.block{
width: 14rem;
height: 7rem;
background-color: rgba(240, 243, 250,.6);
border-radius: 5px;
padding: 20px
}
.bump{
margin-bottom: 1.5rem;
}
.overview_pageviews{
font-size: .8rem;
font-weight: 600;
}
.overview h4{
display: inline-block;
}

Answer 1

您可以使用flexbox执行此操作。您所要做的就是用div包装较低的元素，然后将d-flex添加到包装元素并将justify-content属性设置为space-between(引导程序中的等效类是justify-content-between(。要使元素与87底部完全对齐3%您应该考虑的最后一件事是使用值为center(align-items-center( 的align-items属性。此外，您可以使用align-self作为执行此操作的替代方法，并将其添加到您个人所需的元素中。

所以你的最终代码应该是这样的：

.block {
width: 14rem;
height: 7rem;
background-color: rgba(240, 243, 250, 0.6);
border-radius: 5px;
padding: 20px;
}
.bump {
margin-bottom: 1.5rem;
}
.overview_pageviews {
font-size: 0.8rem;
font-weight: 600;
}
.overview h4 {
display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-12 col-sm-4 col-lg-3 d-flex justify-content-center">
<div class="card border-0" style="width: 14rem; height: 7rem;">
<div class="card-body">
<div class="bump">
<span class="overview_pageviews">Page Views</span>
<img src="images/icon-facebook.svg" class="icon" alt="" style="float: right"><br>
</div>
<div class="d-flex justify-content-between align-items-center">
<h4>87</h4>
<span class="green_font"><img src="images/icon-up.svg" alt="">3%</span>
</div>
</div>
</div>
</div>