無法創建兩個div的，因爲圖像元素之間的平等間隙內的股利

Question

看着這個形象可能把事情說清楚的一個..

FIDDLE

主容器是一個div，其中有5個div，每個div都持有一些數據。

如果該數據的計數爲0，則只顯示文本。 如果計數大於0，則顯示計數和圖像嵌套在一個範圍內，圖像和數字是可點擊的...

第二個圖像是顯示如何在div內的文本正在呈現..

由於圖片在第3和第5個div的div之間的差距不一致。即使圖像設置爲position:relative和position:absolute，設置左側和頂部屬性似乎都沒有影響..

有人可以幫助我在這方面..

HTML

<div id="prop"> 
    <div id="lvl1" class="alrt"> 
     Missing reads within 1 week : <span data-tr="1">0</span> 
    </div> 
    <div id="lvl2" class="alrt"> 
     Latest reads 1 Week or older : <span data-tr="2">0</span> 
    </div> 
    <div id="lvl3" class="alrt"> 
     Occupied Zero Consumption : <span data-tr="3"><a>39 <img src="../icon1.png" title="" /></a></span> 
    </div> 
    <div id="lvl4" class="alrt"> 
     Negative Consumption : <span data-tr="4">0</span> 
    </div> 
    <div id="lvl5" class="alrt"> 
     Vacant Consumption: <span data-tr="5"><a>5 <img src="../icon2.png" title="" /></a></span> 
    </div> 
    <div class="msg"> 
     *all alerts are based on yesterdays reads 
    </div> 
</div> 

後

CSS

#prop 
{ 
    height:55%; 
    padding-top:10px; 
    border:solid 2px #B2CD48; 
    border-radius:10px; 
    margin:10px 0 10px 15px; 
} 

#prop > .alrt 
{ 
    width:80%; 
    float:right; 
    height:12%; 
    font-weight:700; 
    font-size:1em; 
    color:#42456B; 
    padding:3px; 
} 

.alrt a 
{ 
    cursor:pointer; 
    position:relative; 
} 

.alrt > span > a > img 
{ 
    width:20px; 
    height:20px; 
    position:relative; 
    top:3px; 
} 

Answer 1

嘗試使用此爲.alrt> span> a> img

.alrt > span > a > img 
{ 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: -3px; 
}