この商品のデザインをコーディングする最良の方法私はHTML/CSSでのみ作成しました

Question

私は自分のバディのためのプロジェクトをやっており、彼は大きなカルテルを使っています。私はTシャツが表示され、次にTシャツの右上隅にサークルが表示され、価格が表示され、製品が販売されているかどうかが表示されます。私は以下のHTML/CSSを使用して、これまでのものを手に入れましたが、意図した通りに出てこないことがわかりました。また、製品価格に余裕や余白を追加しようとしたときに、 ？

注 - $ 19.99は、コード化された価格です... $ 14.99の価格で、売り切れと言われているのはちょうど私が参考のためにそれを置いた画像なので、Photoshopで設計された正確な場所に貼り付けます使用されて

CSS：

#products { 
float: left; 
margin-top:35px; 
} 


#product-1, #product-2, #product-3, #product-4, #product-5, #product-6, #product-7, #product-8, #product-9, #product-10, 
#product-11, #product-12, #product-13, #product-14, #product-15, #product-16, #product-17, #product-18, #product-19, #product-20, 
#product-21, #product-22, #product-23, #product-24, #product-25, #product-26, #product-27, #product-28, #product-29, #product-30, 
#product-31, #product-32, #product-33, #product-34 #product-35, #product-36, #product-37, #product-38, #product-39, #product-40, #product-41, #product-42, #product-43, #product-44, #product-45, #product-46, #product-47, #product-48, #product-49, #product-50, #product-51, #product-52, #product-55, #product-56, #product-57, #product-58, #product-59, #product-60, #product-61, #product-62, #product-63, #product-64, #product-65, #product-66, #product-67 #product-68, #product-69, #product-70, #product-71, #product-72, #product-73, #product-74, #product-75, #product-76, #product-77, #product-78, #product-79, #product-80, #product-81, #product-82, #product-83, #product-84, #product-85, #product-86, #product-87, #product-88, #product-89, #product-90, #product-91, #product-92, #product-93, #product-94, #product-95, #product-96, #product-97, 
#product-98, #product-99, #product-100 { 
float:left; 
} 
#products .product-img {width:225px; margin-left:5px; margin-right:5px;} 
#products .product-title {font-size:16px;} 
#products .product-price {color:#fff; font-family:Arial; font-size:13px;} 
#products .pink-circle {background-image: url(http://soireeclothing.com/images/price-bg.png); height:54px; width:54px; margin-top:-250px; margin-left:170px;} 

結果、私は取得しています：私はしたい http://i.imgur.com/8DSbw.png

結果： を

Answer 1

あなたのHTMLコードを投稿してください。

CSSをきれいにするために、1つのクラスを持つように製品を変更することをお勧めします。

可能な解決策は、販売クラスでCSSプロパティz-indexを使用することです。これは、別の要素の背後で販売価格を表示/非表示にする可能性があります。

これを製品に実装するには、販売価格の要素を手動で販売する各商品のHTMLマークアップに入れるか、Javascript経由で追加することができます。

さらに簡単にJQuery！ $('#Element').addClass('Class');