html - 如何将图像放置在没有设置大小的图像的右下角

Question

这是我的html

<div class="container">
   <img src="something" class="avatar"/>
   <div class="edit_photo">Edit</div>
</div>

“edit_photo”的背景上有一张图片。img 标签尺寸没有设置，所以它可以是任何东西。但我希望“edit_photo” div 始终位于 img 的右下角。这可以用css吗？我想不出办法来做到这一点。img 标签必须始终是 img 标签，我不能将其更改为 div。

谢谢！

Answer 1

我认为这是可能的：

CSS：

.container{
    position: relative;
    display: inline-block;
}

img{

    background: red;
    height: 120px;
    width: 250px;
}

.edit_photo{
    position: absolute;
    bottom: 0;
    right: 0;
    background: blue;
    height: 25px;
    width: 25px;
 }

这是一个 JSFiddle 可以看到：http: //jsfiddle.net/gW9PK/

您可能需要使用 .edit_photo 并将其稍微调整一下。

Answer 2

容器应该是这样position: relative;的，edit_photoposition: absolute;是这样的：

.container {
    position: relative;
    /* inline-block for 100% of child width */
    display: inline-block;
    border: 3px solid #ddd;
}
img {
    /* for 100% height of the container */
    display: block;
}
.edit_photo {
    position: absolute;
    right: 5px;
    bottom: 10px;
    /* Some color */
    background: red;
    padding: 2px 4px;
    border-radius: 3px;
    color: white; 
}

使用多个图像更新演示：http: //jsfiddle.net/HYQLQ/3/

Answer 3

用css写这段代码

.container{
   position:  absolute;

}

。编辑图片{

 position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;

}

Answer 4

edit_photo { bottom:-600 top:30px; right:5px; }

玩数字。