html - 对齐右下角的更好方法

Question

有没有更好的方法来对齐单元格右下角的内容？

我有一个仅包含背景图像的 div，10 像素 x 10 像素。我正在使用以下样式将其放在右下角。 (我的单元格高 40 像素。)

这样做会导致我失去 div 上方的 30px。 (我也将其用作可单击的对象，因此我可以单击右侧的任意位置，而不仅仅是单元格的底 Angular 。)

.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; }

如果这也可以在不使用边距的情况下完成，那就太好了。

示例图片:

Answer 1

你应该让你的包装类 position:relative; 然后无论你在里面有什么你都可以绝对定位 position:absolute;底部:0；右: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;
}