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

大家好,我是新来的,刚开始学习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>