大家好,我是新来的,刚开始学习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;
}
You can do this with
flexbox
. All you have to do is to wrap your lower elements with adiv
and then addd-flex
to the wrapping element and set thejustify-content
attribute tospace-between
(Equivalent class in bootstrap isjustify-content-between
). And the last thing you should consider to make3%
element exactly align with the bottom of87
is to usealign-items
attribute with a value ofcenter
(align-items-center
).因此,您的最终代码应如下所示: