在div / img周围浮动文本

Question

我需要帮助创建一个漂浮在价格标签上的文本容器，就像在上看到的那样。

这是我到目前为止所尝试的内容： http://jsfiddle.net/kzmndzj4

<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>

问题： 我希望价格标签始终位于某个位置（因此它位于每个产品的相同位置），并且文字漂浮在我发布的图片上。

Answer 1

试试这个http://jsfiddle.net/Tushar490/yj2zcwjb/1/

CSS

body {
background-color: grey;
}
.product {
width: 258px;
height: 150px;
background-color: white;
display: inline-block;
margin-right: 25px;
color: black;
padding: 5px;
position: relative;
word-break: break-all;
}
.product p {
padding: 5px;
}
.pricetag {
height: 54px;
width: 115px;
background: url('http://i.imgur.com/ES3wymx.png') no-repeat;
padding-top: 20px;
padding-left: 5px;
font-weight: bold;
top: 40%;
left: 62.2%;
position: absolute;
}

Answer 2

您可以使用此代码，它可能对您的问题有所帮助。

Live Working Demo

HTML代码：

 <div class="product">
  <div class="pricetagspacer"></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 class="pricetag">
        999 €
    </div>
</div>

    <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代码：

    body
{
    background-color: grey;
}
.pricetagspacer
{
  height: 100%;
  width: 0;
  float: right;
  margin-bottom: -65px;
}

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

.product p
{
    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;
    margin-top:-50px;
    margin-right:-25px;
}

结果：