在一個div中使用多個類與圖像

我在一個div中使用了兩個類。我遇到的問題是我有兩個不同的title divs，每個標題都會有它自己的圖像。我無法弄清楚爲什麼每個標題都不會顯示他們自己的圖像。兩張圖片都會疊放在第一個div上，我做錯了什麼？在一個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>

來源

2013-03-21 chillers

爲什麼不去掉所有'位置'？並將'.icon-img2：before'轉換爲'.icon-img2'？ – 2013-03-21 10:17:57

現在您.title添加position: relative;類

作爲這樣

.title { 
    position: relative; 
}

Demo

來源

2013-03-21 10:10:58

我嘗試過'position：relative;'在img類上，但不是標題。謝謝！ – chillers 2013-03-21 10:13:01

您可以在標題類設置position: relative爲羅希特建議或第二圖像類添加32PX到top值。原因是position: absolute位置基於下一個具有位置屬性的父元素。因此，您的圖像都被定位在身體外，因此被放置在距離左上角4px處。給予標題position: relative意味着它將被用作子類的'錨點'。

來源

2013-03-21 10:19:13 gaynorvader

在一個div中使用多個類與圖像

回答

相關問題