浮動文本div/img

-2

我需要幫助創建一個文本容器，圍繞價格標籤浮動，就像在此 [picture] 上看到的那樣。浮動文本div/img

這是我到目前爲止已經試過： 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>

問題：我想要的價碼總是在一定的位置（所以它的每個產品的相同位置）和文字像我張貼的圖片一樣浮動。

來源

2014-09-02 user3307515

歡迎，你問問題又來了... – 2014-09-02 12:19:36

好了，好像他編輯了前面的問題，現在好了@ user3307515 – 2014-09-02 12:28:27

我必須關閉這個問題？如果是的話，我該怎麼做？ – user3307515 2014-09-02 13:02:26

-1

您可以使用此代碼可能有助於您的問題。

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

結果：

result

來源

2014-09-02 12:24:46 Developer

如果文本繼續進行，它會覆蓋價格標籤，這不是OP想要的。他希望它完全圍繞橙色標籤。 – Lee 2014-09-02 12:29:36

好的。我會盡快修改。 – Developer 2014-09-02 12:34:55

我真的很感謝你的幫助，但是文字必須像Lee提到的橙色標籤。 – user3307515 2014-09-02 13:02:58

試試這個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; 
}

來源

2014-09-02 12:49:58

浮動文本div/img

回答

相關問題