css - 在图像上浮动文本..如何将其对齐到右侧

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

演示

Answer 2

HTML: Text CSS:

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

Example - http://jsfiddle.net/Hxcgs/