Как сделать что-то подобное в 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 относятся к портретному элементу div, а не ко всей странице. Проверьте CSS Positioning для более подробной информации о свойстве position.

Answer 3

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

Поплавки не требуются.Измените порядок, после чего вы сможете использовать этот код:

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

Answer 4

Ваша проблема заключается в том, что внутри тега a должен быть тег 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 будет рамка вокруг изображения.

Редактировать: Да, Steveax является правильным. Я даже не думал о том, что ты хочешь ссылку внутри картинки.

Answer 5

Вы можете добавить следующее к вашему портрету css:

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

edit: только что увидел комментарий steveax, вы, вероятно, должны его использовать. по крайней мере, получить мой голос.