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/

在图像上浮动文本..如何将它对齐到右边

2 个答案: