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

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

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

如果您需要将文字与边缘隔开更远，可以将0更改为2px或类似内容。