在图像周围浮动文本

Question

我需要帮助创建一个漂浮在价格标签周围的文本容器，如下图所示：

这是我到目前为止所尝试的内容：

jsFiddle Demo

HTML：

<div class="product">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <div class="pricetag">
    999 €
    </div>
</div>

CSS：

.product
{
    width: 258px;
    height: 150px;
    background-color: white;
    display: inline-block;
    margin-right: 25px;
    color: black;
    padding: 5px;
}

.pricetag
{
    height: 54px;
    width: 115px;
    background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
    float: right;
    padding-top: 20px;
    padding-left: 5px;
    font-weight: bold;
}

我希望价格标签始终位于某个位置（因此它位于每个产品的相同位置），并且文本会像我发布的图片一样浮动。

Answer 1

您只需要在图像上应用浮动，或者在右侧使用div。

div {float:right;}

Answer 2

提示

子

position:absolute; z-index:2;

主要

position:relative; z-index:1;

Answer 3

这是一个只有在你有固定高度div（这里是.product）时才有效的解决方案：

<强> jsFiddle Demo

您必须在文本前放置.pricetag div。然后，主要技巧是使用右边浮动的间隔，宽度为0：

HTML：

<div class="product">
    <div class="pricetagspacer"></div>
    <div class="pricetag">
        999 €
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS：

.pricetag
{
    height: 54px;
    width: 115px;
    background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
    float: right;
    padding-top: 20px;
    padding-left: 5px;
    font-weight: bold;
    clear: right; /* to be positioned under the spacer */
    position: relative; 
    right: -24px; /* to go a bit offside */
    margin-left: -24px; /* corrected margin because of the previous line */
}
.pricetagspacer {
    height: 100%; /* to space the whole height */
    width: 0; /* so we don't have more "padding" on the right of .product */
    float: right;
    margin-bottom: -65px; /* to eventually position correctly the .pricetag */
}