浮动的文本在图像..如何将其对齐

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/