Question

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

这就是我想要做的。一个Div中有一些文本，右下角是一个img。 div的高度稳定在24px，但长度未知，并且可能有多个这样的div连续。

Answer 1

有几种技巧可以做到这一点。最简单的：

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

与

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

现在它将它从正常流程中取出，这是一个问题，你想要其他内容包装/浮动它。在这种情况下，你真的需要知道图像的高度，然后根据你所拥有的内容应用适当的技巧。

从Making the absolute, relative开始。

例如，如果图像高10像素，您可以尝试：

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

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

Answer 2

背景图片是您的解决方案。

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

您可能还需要调整div的填充，因此如果需要，div的内容不会与您的图片重叠。

Answer 3

如果你想在图像周围浮动文字，那么这两个答案都是错误的。两者都会使文本在图像上方正确。我一直在寻找几个小时，似乎没有真正的答案存在。 This article更清楚地解释了为什么如果你试图包装文本，这两个答案都不会起作用。

Answer 4

<div class='main'>
    <div>...</div>
    <div>...</div>
    <div class="img-div">
      <img src="....">
    </div>
</div>


div.main { 
   height: 1164px;
   width: 900px; 
}
div.img-div {
   position: absolute;
   top: 1084px;
   left: 817px;
   margin: .75rem;
}

假设图片尺寸为 57*55

Answer 5

仅用于在右下角定位图像： 我在 div 中有“Div”和图像，在 div 的右下角有小图像。

详细： https://jsfiddle.net/ez08vL7w/

       <html>
        <head> 
        </head>
        <body> 
<div style=" position:relative; display: inline-block">
  <img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; " 
    src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
            
   <a href ="" target="_blank"> 
    <img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
            
            </div> 
            </body> 
        </html>

简化：

<div style=" position:relative; display: inline-block">
      <img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; " 
        src=""/> 

        <img src=""/>  
          </div>

如何在div的右下角放置一个img

5 个答案: