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

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

我试图对齐“3%”文本，使其在填充区域内向上推至右下角

我在这里找到了如何在一个div中实现这一点的结果，其中涉及以下内容：

.parent div{
    position: relative;
}

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

它工作得很好，但不幸的是，它将文本对齐到整个div的右下角，我只希望它正好对着填充区域

我已经包括了问题的图片以及该部分的HTML和CSS。如果有什么不同的话，我也在使用引导和他们的卡片工具

非常感谢您的帮助：）

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>

---

您可以使用执行此操作。您所要做的就是用

div

包装较低的元素，然后将

d-flex

添加到包装元素中，并将

justify content

属性设置为

space between

（引导中的等效类为）。最后要考虑的是<强>使<代码> 3% < /C>元素完全符合<代码> 87 < /代码>的底部，使用<代码>对齐项属性，值为代码>中心< /代码> <强>（）。此外，您还可以使用另一种方法来执行此操作，并将其添加到所需的单个元素中

因此，您的最终代码应该如下所示：

.block{
宽度：14rem；
身高：7雷姆；
背景色：rgba（240243250,0.6）；
边界半径：5px；
填充：20px；
}
.碰撞{
保证金底部：1.5雷姆；
}
.overview_页面浏览量{
字体大小：0.8rem；
字号：600；
}
.概览h4{
显示：内联块；
}

页面浏览量


87
3%

您可以使用执行此操作。您所要做的就是用

div

包装较低的元素，然后将

d-flex

添加到包装元素中，并将

justify content

属性设置为

space between

（引导中的等效类为）。最后要考虑的是<强>使<代码> 3% < /C>元素完全符合<代码> 87 < /代码>的底部，使用<代码>对齐项属性，值为代码>中心< /代码> <强>（）。此外，您还可以使用另一种方法来执行此操作，并将其添加到所需的单个元素中

因此，您的最终代码应该如下所示：

.block{
宽度：14rem；
身高：7雷姆；
背景色：rgba（240243250,0.6）；
边界半径：5px；
填充：20px；
}
.碰撞{
保证金底部：1.5雷姆；
}
.overview_页面浏览量{
字体大小：0.8rem；
字号：600；
}
.概览h4{
显示：内联块；
}

页面浏览量


87
3%

非常感谢您回答我的问题！我想知道我的问题是否得到了正确的解释。我会试试你的解决方案，看看结果如何。@kalihix我很高兴它有帮助，你可以使用答案旁边的灰色标记（勾号）图标将其标记为答案。更多信息，请阅读。非常感谢您回答我的问题！我想知道我的问题是否得到了正确的解释。我会试试你的解决方案，看看结果如何。@kalihix我很高兴它有帮助，你可以使用答案旁边的灰色标记（勾号）图标将其标记为答案。更多信息，你可以阅读。你得出结论了吗？你得出结论了吗？

.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;
}