CSS:如何在右下方定位元素？

Question

我试图在右下角定位文本元素"Bet 5 days ago".我怎么能做到这一点？更重要的是,请解释一下,我可以征服CSS!

Answer 1

让我们说你的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

Answer 2

position: relative;在框中设置CSS .这会导致内部对象的所有绝对位置相对于该框的角.然后在"Bet 5 days ago"行中设置以下CSS:

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

如果您需要将文本与边缘隔开更远,则可以更改0为2px或类似.