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_photo position: 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;

}

.edit_photo {

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

}

Answer 4

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

玩数字。

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

4 个答案: