更好的底部右对齐方式

Question

有没有更好的方法将某物对齐到单元格的右下角？

我有一个只包含背景图片（10像素乘以10像素）的div。我使用以下样式将其放置在右下角。（我将其放在的单元格高度为40像素。）

用这种方式会导致我失去div上方的30像素。（我还将其用作可点击的内容，因此我可以在右侧任何位置单击，而不仅仅是单元格的右下角。）

.time_note { float:right; width:20%; min-height:40px; display:block; 
    margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat; 
    background-position:bottom; }

如果不使用边距也能实现这个效果，那就太好了。

示例图片:

- Cody

---

请查看以下解决方案 Stackoverflow。 - charkoul

Answer 1

你应该将包装类设为position:relative;，然后你想要放置在里面的内容可以使用绝对定位 position:absolute; bottom:0; right:0;

例如：

HTML：

<div class="wrapper">
<div class="arrow"></div>
</div>

CSS：

.wrapper
{
width:100px;
height:100px;
position:relative;
}

.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}

- bobek

---

稍微扩展一下这个概念，当你在一个元素或类上声明 position 为 absolute 或 relative 时，该元素会相对于最近具有某种定位方式（非 static）的父元素获得其位置。如果将 position 设置为 relative 且不声明 top/left，则它的位置将是距离正常位置0像素（即没有变化），但允许其中的项目正确定位。 - Chris Sobolewski

为我们创建一个 http://jsfiddle.net/，这样我们就可以看到你所说的它没有显示出来是什么意思。 - bobek

我看到了。关于这个问题再问一个问题，可能与表格有关。 - bobek

Answer 2

你可以使用 position: absolute，并设置 bottom: 0; right: 0; 将其放置在父元素的右下角（父元素需要设置为 position: relative;）。当然，这可能会与该元素中的其他信息重叠。

- Steve

Answer 3

尝试：

background-position:bottom right;

- Javier Hidalgo Jurado

Answer 4

我相信你要找的是这个，你只需要将它修改为在右边

固定页脚

- Justin Pihony

---

链接已损坏。 - K.K Designs

链接已损坏 - K.K Designs