css - float 文本在图像上..如何将其右对齐

Question

我试图在图像上 float 一些文本(价格)。图片的宽度和高度始终相同，但文本的长度可能不同。所以我试图在右侧始终保持相同的空间，并根据需要向左侧扩展文本。出于某种原因，我无法让它发挥作用。它总是在开箱即用的情况下向右扩展。有什么想法吗？

这是我的 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