浮動的文本在圖像..如何將其對齊

Question

我想浮動一些文字（價格）超過圖像。圖像始終是相同的寬度和高度，但文本可能會有不同的長度。所以我試圖保持右側的空間總是一樣，並根據需要向左側擴展文本。出於某種原因，我無法完成工作。它始終從右側擴展到右側。有任何想法嗎？

這裏是我的HTML代碼：

<div class="productphoto"> 
<img src="photo.jpg"> 
<div class="pricetag">$1959.99</div> 
</div> 

而CSS：

.productphoto { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 
.pricetag { 
    position: absolute; 
    top: 190px; 
    left: 190px; 
    text-align:right; 
} 

Answer 1

您需要將您的.pricetag相對合適的位置，沒有離開：

.pricetag { 
    position: absolute; 
    top: 190px; 
    right: 10px; /* NOT left: 190px; */ 
    text-align:right; 
} 

DEMO

Answer 2

HTML： 文本 CSS：

.image { 
    float: left; 
} 
.text { 
    float: left; 
    margin-left: 10px; 
} 

示例 - http://jsfiddle.net/Hxcgs/