4

1 つの div で 2 つのクラスを使用しています。私が抱えている問題は、2 つの異なるtitlediv があり、各タイトルに独自のイメージがあることです。各タイトルに独自の画像が表示されない理由がわかりません。両方の画像が最初の div に積み上げられます。何が間違っていますか?

デモ http://jsfiddle.net/mRRA4/

CSS

.title {
border: 1px solid #AAA;
padding: 4px 22px;
}


.icon-img1:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
background: url(http://png-4.findicons.com/files/icons/366/icomic/24/images.png);
width: 24px;
height: 24px;
}

.icon-img2:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
background: url(http://png-5.findicons.com/files/icons/753/gnome_desktop/24/gnome_emblem_photos.png);
width: 24px;
height: 24px;
}

HTML

 <div class="title icon-img1">Title 1</div>
 <div class="title icon-img2">Title 2 </div>
4

2 に答える 2

3

position: relative;今すぐあなたの.titleクラスを追加してください

このように 

.title {
    position: relative;
}

デモ

于 2013-03-21T10:10:58.327 に答える
1

Rohit が提案したようにタイトル クラスに設定するか、2 番目の画像クラスposition: relativeの値に 32px を追加することができます。topこれはposition: absolute、position 属性を持つ次の親要素に基づいて配置されるためです。したがって、両方の画像が本体から外れて配置されていたため、左上から 4px に配置されていました。タイトルに aを付けるposition: relativeことは、それが子クラスの「アンカー」として使用されることを意味します。

于 2013-03-21T10:19:13.087 に答える