Позиционирование изображения относительно 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 «s suggestion:

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 :)