CSS：如何定位元素在右下角？

问题描述

我试图在右下角放置文字元素Bet 5天前。我该如何做到这一点？更重要的是，请解释，以便我可以征服CSS！

I am trying to position the text element "Bet 5 days ago" in the lower right-hand corner. How can I accomplish this? And, more importantly, please explain so I can conquer CSS!

推荐答案

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

Lets say your HTML looks something like this:

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

然后，使用CSS，您可以使该文本显示在右下角，如下：

Then, with CSS, you can make that text appear in the bottom right like so:

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

这种方式的工作原理是绝对定位的元素总是相对于第一相对定位的父元素，或窗口。因为我们将框的位置设置为relative，所以 .bet_time 将其右边缘定位到 .box 的右边缘底边到 .box的底边

The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box's position to relative, .bet_time positions its right edge to the right edge of .box and its bottom edge to the bottom edge of .box

这篇关于CSS：如何定位元素在右下角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！