更好的方法来排列右下角 [英] Better way to align bottom right

问题描述

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

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

这样做会导致我失去div上方的30px。 （我也用它作为点击的东西，所以我可以点击右边的任何地方，而不是单元格的底部角落。）

  .time_note {float：right;宽度：20％;最小高度：40像素;显示：块; 
 margin-right：-5px; } 
 .time_note {background：url（'/ images / sheet / note_marker.png'）no-repeat; 
 background-position：bottom; } 
  

如果这样做也可以不使用边距，那就太好了。 b
$ b

示例图像：

解决方案

你应该让你的包装类 position：relative; ，然后无论你在里面有什么，都可以绝对定位 position：absolute;底部：0;右：0;

例如

HTML：

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

CSS：

  .wrapper 
 {
 width：100px; 
 height：100px; 
职位：亲属; 
} 
 
 .arrow 
 {
 width：10px; 
 height：10px; 
位置：绝对; 
 right：0px; 
 bottom：0px; 
} 
  

Is there a better way to align something in the bottom right of a cell?

I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)

Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)

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

If this could also be done NOT using margins, that would be great.

Example Image:

解决方案

You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;

For example

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

这篇关于更好的方法来排列右下角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！