圖像相對於div中的div的位置

Question

我正在嘗試創建一個顯示時間的頁面。 我使用的字體的'：'很丑陋，所以我想用圖像替換它。 但是，當時間從例如9:59變為10:00時，會出現間距問題。 這是我的一些代碼：

.image{
    position: absolute;
    width:30px; height:90px; 
    background-image: url("2dots.png");
    background-repeat: no-repeat;
    background-size:50%;margin-top:30px;
    left:50%;
    margin-left:-49px;
    z-index:-1;
}
#time { 
    font-size: 99px; 
    width:300px;
    left:50%; 
    margin-top:0px;
    margin-left:-40px;
}
<div id="time"><div class="image"></div></div>
function updateClock() //updates time ever second inside #time every second

Answer 1

您真的不想擺弄這樣的位置。

您只需將.image設置為display: inline-block ，然后將其放置在小時和分鍾之間：

.image{
    width:30px;
    height:90px; 
    background-image: url("2dots.png");
    background-repeat: no-repeat;
    background-size:50%;
}

<div id="time">
    <span id="hours">12</span>
    <div class="image"></div>
    <span id="minutes">30</span>
</div>

然后，只需在適當的跨度中設置當前時間的小時/分鍾即可。
當然，您可以根據需要添加幾秒鍾。

但是，另一種選擇是使用<span>來顯示不同的字體，僅用於冒號：

 span{ font-family: Arial; } .colon{ font-family: Tahoma; } 

 <div id="time"> <span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span> </div> (Normal colon : ) 

或者，根據@Paulie_D的建議 ：

 span{ font-family: Arial; } #hours:after{ content: ':'; font-family: Tahoma; } 

 <div id="time"> <span id="hours">12</span><span id="minutes">30</span> </div> (Normal colon : )