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

Question

我正在尝试将文本元素“5天前下注”定位在右下角。我该如何实现？更重要的是，请解释一下，以便我可以学习并掌握CSS！

- keruilin

---

如果您能展示出您目前拥有的HTML和CSS，那会更容易理解。 - John Hartsock

关于掌握 CSS，我强烈推荐以下书籍：http://books.google.ie/books/about/CSS_The_Definitive_Guide.html?id=rdtCRLXAL78C&redir_esc=y - Philip Murphy

Answer 1

假设你的HTML代码如下所示：

Lets say your HTML looks something like this:

<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的下边缘对齐。

- Austin Hyde

---

但是如果 .box 本身必须是 position:absolute，该怎么解决呢？不可能吗？ - Black

你的 .box 仍然是 position:relative。 - Black

.box2 是 position:absolute。 - Austin Hyde

容器必须是相对的，其中的内容必须是绝对定位的，太棒了！谢谢。 - Haryono Sariputra

不，这个解决方案将其定位在父容器的右下角，而不考虑页面/视口大小。如果你的 .box 等价物设置为 100% 的宽度/高度，那很可能是视口大小，而不是页面大小。 - Austin Hyde

Answer 2

在盒子上设置CSS属性position: relative;，这会导致盒子内部的所有绝对定位对象相对于该盒子的角落进行定位。然后在“5天前下注”行上设置以下CSS：

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

如果您需要将文字与边缘进一步分开，您可以将0更改为2px或类似的值。

- PleaseStand