-1

这是我的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。

谢谢！

4

4 回答 4

2

我认为这是可能的：

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 并将其稍微调整一下。

于 2013-04-11T17:54:58.700 回答
1

容器应该是这样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/

于 2013-04-11T17:57:00.803 回答
0

用css写这段代码

.container{
   position:  absolute;

}

。编辑图片{

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

}

于 2013-04-11T17:53:33.443 回答
0

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

玩数字。

于 2013-04-11T17:54:34.447 回答