CSS:如何将元素放置在右下角?


Answers:


219

假设您的HTML看起来像这样:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

然后,使用CSS,您可以使文本显示在右下角,如下所示:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

这种工作方式是,绝对定位的元素始终相对于第一个相对定位的父元素或窗口定位。因为我们将框的位置设置为相对,所以.bet_time将其右边缘定位于的右边缘,.box并将其底部边缘置于的底边缘。.box


但是,如何解决这个问题,如果.box本身是position:absolute?不可能?
2015年

.box静止了position:relative
黑色

.box2position:absolute
奥斯汀·海德

您可能需要将父级设置为display:inline-block;
BillyNair '16

容器必须是相对的,并且容器中的内容必须是绝对的,才可定位!谢谢
Haryono Sariputra

26

position: relative;在框上设置CSS 。这将导致内部对象的所有绝对位置都相对于该框的角。然后在“ 5天前下注”行中设置以下CSS:

position: absolute;
bottom: 0;
right: 0;

如果您需要使文本距离边缘的距离更远,则可以更改02px或类似。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.