Html 如何在div的右下角放置一个img
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1476425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a img in the right bottom corner of a div
提问by Markus
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
替代文字 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.
这就是我想要做的。一个带有一些文本的 Div，右下角是一个 img。div 的高度稳定在 24px，但长度未知，并且可能有多个这样的 div 连续。
回答by cletus
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:
例如，如果图像高 10 像素，您可以尝试以下操作：
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.
当然 14px 来自 24px - 10px。我不知道这是否会满足你想要实现的目标。
回答by n1313
Background image is your solution.
背景图片是您的解决方案。
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
如果需要，您可能还需要调整 div 的内边距，以便 div 的内容不会与您的图片重叠。
回答by Dustin Poissant
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This articlemore clearly explains why both of those answer will not work if your attempting wrapping the text.
如果您想在图像周围浮动文本，那么这两个答案都是错误的。两者都会使文本直接覆盖图像。我一直在寻找几个小时，似乎没有真正的答案存在。这篇文章更清楚地解释了为什么如果您尝试包装文本，这两个答案都不起作用。
