如何在HTML中制作这样的东西？

Question

类似的东西：

只是一张图片和指向某处的链接。

这是我掀起的东西，但似乎无法使它像图片一样工作。

http://jsfiddle.net/stapiagutierrez/z6LBL/6/

#portrait {
    border:1px solid red;
    height:100px;
    width:100px;
}

#portrait .image {
    float:left;
    height:100px;
    width:100px;
}

#portrait a {
    float:right;
}

<div id="portrait">
    <img class="image" src="http://media.giantbomb.com/uploads/14/141112/1983897-307865_10150294906295771_529235770_8254698_904096888_n_large.jpg" />
    <a href="#">alterar foto</a>
</div>

Answer 1

你可以像你一样使用花车，但我认为绝对定位实际上更容易。 @至少对我而言。这是你想要的小提琴：http://jsfiddle.net/jalbertbowdenii/z6LBL/19/

Answer 2

诀窍是在容器上使用position:relative，在锚点上使用position:absolute。因为锚在position:relative框内，所以它的top，left，right和bottom属性是相对于portrait div而不是整个页面。查看CSS Positioning以获取有关位置属性的更多详细信息。

Answer 3

您可以将以下内容添加到您的肖像中：

#portrait a {
    float:right;
    position: absolute;
    margin-left: -75px;
}

编辑：刚看过史蒂夫斯的评论，你应该用它。至少得到我的投票。

Answer 4

您的问题在于您需要在标签内部使用img标签。例如：

<a href="#">
<img class="image" src="http://media.giantbomb.com/uploads/14/141112/1983897-307865_10150294906295771_529235770_8254698_904096888_n_large.jpg" /
</a>

您也可以考虑添加：

a {
border: 0;
}

根据您的风格，如果没有，Internet Explorer中的图像周围会有一个框。

编辑：是的，史蒂夫斯是正确的。我甚至没想到你想要图片中的链接。

Answer 5

http://jsfiddle.net/z6LBL/37/

不需要花车。 重新排序然后你可以使用这个css：

#portrait {
    border:1px solid red;
    height:100px;
    width:100px;
}

#portrait .image {
    height:100px;
    width:100px;
}

#portrait a {
    position: fixed;
    text-align: right;
    width: 100px;
}

更新：我没有注意到你想要一个背景颜色，你需要在它周围添加一个跨度和样式。

http://jsfiddle.net/z6LBL/39/

<div id="portrait">
    <span>
     <a href="#">alterar foto</a>
    </span>
    <img class="image" src="http://media.giantbomb.com/uploads/14/141112/1983897-307865_10150294906295771_529235770_8254698_904096888_n_large.jpg" />
</div>
#portrait {
    border:1px solid red;
    height:100px;
    width:100px;
}

#portrait .image {
    height:100px;
    width:100px;
}

#portrait span {
    position: fixed;
    text-align: right;
    width: 100px;
}

#portrait a {
    background-color: yellow;
}