2

画像の上にテキスト (価格) を浮かせようとしています。画像は常に同じ幅と高さですが、テキストの長さは異なる場合があります。そのため、常に右側に同じスペースを確保し、必要に応じてテキストを左側に拡張しようとしています。どういうわけか、私はそれを機能させることができません。常にボックスから右に浮かんで展開されます。何か案は？

ここに私の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;
}
4

2 に答える 2

2

.pricetag左ではなく右に相対的に配置する必要があります。

.pricetag { 
   position: absolute;
   top: 190px; 
   right: 10px; /* NOT left: 190px; */ 
   text-align:right;
}

デモ

于 2013-03-20T18:31:34.370 に答える
0

HTML: テキスト CSS:

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

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

于 2013-03-20T18:34:13.790 に答える