0

この画像を見ると、物事が明確になるかもしれません..

フィドル

ここに画像の説明を入力

ここに画像の説明を入力

メイン コンテナは、さらに 5 つの div があり、それぞれにデータが保持されている div です。

そのデータのカウントが 0 の場合は、テキストを表示するだけです。カウントが 0 より大きい場合、スパン内にネストされたカウントと画像が表示され、画像と数値はクリック可能です...

2 番目の画像は、div 内のテキストがどのようにレンダリングされるかを示しています。

3 番目と 5 番目の div の画像のため 、div 間のギャップが一貫していません。画像をposition:relativeおよびposition:absoluteに設定した後でも、 left および top プロパティを設定しても影響がないようです..

誰かがこの文脈で私を助けることができます..

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;
}
4

1 に答える 1

1

これを .alrt > span > a > img に使用してみてください

.alrt > span > a > img
{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
}
于 2012-11-12T17:53:39.243 に答える