如何将img放置在div的右下角 [英] How to place a img in the right bottom corner of a div

问题描述

alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg

这就是我想要做的。带有一些文字的div和右下角的img。 div的高度稳定在24px，但长度未知，并且可能有多于一个div在一行中。

解决方案

 < div class =outer> 
< img src =....> 
< / div> 
  

with

  div.outer {position：relative;身高：24px; } 
 div.outer img {position：absolute;正确：0;底部：0; } 
  

现在，将它从正常流程中解脱出来，这是一个问题，您需要其他内容包裹/浮动在它周围。在这种情况下，您确实需要知道图片的高度，然后根据您的具体情况应用相应的技巧。

从制作绝对的，相对的。

如果例如，你可以试试这个：

  div.outer {height：24px; } 
 div.outer {float：right; margin-top：14px; } 
  

当然14px来自24px - 10px。但我不知道这是否能满足你想要实现的目标。

alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg

This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.

解决方案

There are a couple of techniques of doing this. The simplest:

<div class="outer">
<img src="....">
</div>

with

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.

Start with Making the absolute, relative.

If the image is 10 pixels high, for example, you could try this:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.

这篇关于如何将img放置在div的右下角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！