javascript - 动态时钟中 div 或文本的 CSS 样式

Question

我最近使用 php 和 javascript 创建了一个动态时钟，我还使用 php 将其设置为我想要的样式。我有 4 个不同 div 的时钟。 (文本、日期、时间、日期)我唯一的问题是使用 CSS 如何将这些 div(或者可能是文本本身)的宽度设置为 180px，无论时间或日期是什么。所以时钟是完美的正方形。

这是我的 JSFiddle我已经走了多远。

我的代码也在下面

HTML

<div class="clock" id="day"></div>
<div class="clock" id="time"></div><div class="clock" id="hour"></div>
<div class="clock" id="date"></div>

更新的 css

* {
font-family: 'Open Sans', sans-serif;
}

.clock {
color:#bbb;
font-size: 44px;
}

#time {
display:inline-block;
letter-spacing:3px;
}
#hour {
margin-left:10px;
display:inline-block;
font-size:28px;
}
#date {
font-size:30px;
}
</style>

我为您准备的想法可以在下面看到。所有文本具有相同的宽度。

IMAGE OF WHAT I AM TRYING

Answer 1

使用 <div>在你需要的时候把东西包起来，这样它们就继承了它们父元素的宽度。此外，使用 span 作为默认的“内联”属性对您有利。这将缩短您需要的 css。

<div class="clock">
    <div id="day">Sunday</div>
    <div><span id="time">5:34</span><span id="hour">pm</span></div>
    <div id="date">Feb 28th</div>
</div>


<style type="text/css">
.clock {
    border:1px solid red;
    color:#bbb;
    font-family: 'Open Sans', sans-serif;
    font-size: 44px;
    min-height:180px;
    text-align:center;
    width:180px;
}
.clock > div{
}

#time {
    letter-spacing:3px;
}
#hour {
    padding-left:10px;
    font-size:28px;
}
#date {
    font-size:30px;
}
</style>