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