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

由 发布于 csshtml
 收藏

大家好，我是新来的，刚开始学习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;
}
评论
  • onam
    onam 回复

    You can do this with flexbox. All you have to do is to wrap your lower elements with a div and then add d-flex to the wrapping element and set the justify-content attribute to space-between (Equivalent class in bootstrap is justify-content-between). And the last thing you should consider to make 3% element exactly align with the bottom of 87 is to use align-items attribute with a value of center (align-items-center).

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

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