相对于div内的div定位图像

时间:2014-10-28 09:32:15

标签: javascript jquery html css

我正在尝试创建一个显示时间的页面。     ':'我使用的字体是丑陋的所以我想用图像替换它。     然而,当时间从例如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

1 个答案:

答案 0 :(得分: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>,仅用于冒号:

&#13;
&#13;
span{
    font-family: Arial;
}
.colon{
    font-family: Tahoma;
}
&#13;
<div id="time">
    <span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span>
</div>
(Normal colon : )
&#13;
&#13;
&#13;

或者,来自@Paulie_D&#39; s suggestion

&#13;
&#13;
span{
    font-family: Arial;
}
#hours:after{
    content: ':';
    font-family: Tahoma;
}
&#13;
<div id="time">
    <span id="hours">12</span><span id="minutes">30</span>
</div>
(Normal colon : )
&#13;
&#13;
&#13;