如何将图片放置在div的右下角

Question

如何将图片放置在div的右下角

htmlcss

19

我想要做的事情是，在一个带文字的 Div 中，右下角放置一个图像。Div 的高度保持在 24 像素，但长度不确定，并且同一行可能有多个此类 Div。

alt 文本 http://img190.imageshack.us/img190/7514/unbenanntax.jpg

- Markus

你也可以尝试使用background-image。 - Gumbo

相关：在DIV的四个角落上附加图像和智能地将角落图像添加到所有四个角的DIV边框。 - Skippy le Grand Gourou

5个回答

0

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

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

如果需要的话，您可能需要调整div的填充，以便div的内容不会重叠在您的图片上。

- n1313

0

如果你想让文字环绕在图片周围，那么这两个答案都是错误的。两者都会使文字直接覆盖在图片上。我已经寻找了几个小时，似乎没有真正的答案存在。这篇文章更清楚地解释了为什么这两个答案在尝试环绕文本时不起作用。

- Dustin Poissant

0

<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。

- danish_wani

-1

仅用于将图像定位在右下角： 我有一个"Div"和图像在div中，小图像位于div的右下角。

Detailed: 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>

- Stefan27

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cletus · Accepted Answer

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

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

当然，14像素来自于24像素减去10像素。不过我不知道这是否能满足您的需求。