更好的方式来对齐右下角

Question

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

我有一个div只包含一个背景图像,10px×10px.我使用以下样式将其放在右下角.(我所拥有的细胞是40px高.)

这样做会导致我失去比div高30px.(我也使用它作为点击的东西,所以我可以点击右边的任何地方而不是单元格的底角.)

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