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

Question

我最近使用php和javascript创建了一个动态时钟，我还使用php将其设置为我想要的样式。我把时钟放在4个不同的分区。（Text，Date，Time，Day）我唯一的问题是使用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>

我的想法可以在下面看到。所有文本都有相同的宽度。

我正在尝试的图片

Answer 1

在需要时使用<div>将东西包装在一起，以便它们继承其父元素的宽度。此外，使用跨距作为其默认的"内联"属性对您有利。这将缩短您需要的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>

Answer 2

使用jQuery并采用我发送的评论中链接问答中使用的逻辑：示例

JS

function FontSizes() {
    var Width = $('#clock').width();
    $('.clock').each(function() {
        var NewFontChars = $(this).text().length;
        var NewFontSize = (Width / NewFontChars) * 1.95; // Apparently it's 2 characters per 100% width in px, make it just less so we have a bit of breathing room
        $(this).css('font-size', NewFontSize+'px');
    });   
}

HTML

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

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
#clock {
    background:#333;
    width:180px;
    text-align:center;
    font-family:'Ubuntu Mono', Arial, sans-serif; 
    color:#bbb;
}
#time {
    display:inline-block;
}
#hour {
    display:inline-block;
}

Answer 3

这只是第二行较长时的示例：

tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
function GetClock() {
    var d = new Date(+new Date + 12096e5);
    var dx = d.toGMTString();
    dx = dx.substr(0, dx.length - 3);
    d.setTime(Date.parse(dx))
    d.setSeconds(d.getSeconds() + 0);
    var nday = d.getDay(),
        nmonth = d.getMonth(),
        ndate = d.getDate(),
        nyear = d.getYear(),
        nhour = d.getHours(),
        nmin = d.getMinutes(),
        nsec = d.getSeconds(),
        ap;
    if (nhour == 0) {
        ap = " AM";
        nhour = 12;
    } else if (nhour < 12) {
        ap = " AM";
    } else if (nhour == 12) {
        ap = " PM";
    } else if (nhour > 12) {
        ap = " PM";
        nhour -= 12;
    }
    if (nyear < 1000) nyear += 1900;
    if (nmin <= 9) nmin = "0" + nmin;
    if (nsec <= 9) nsec = "0" + nsec;
  	document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
    document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
    document.getElementById('hour').innerHTML = "" + ap + "";
    document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}
window.onload = function () {
    GetClock();
    setInterval(GetClock, 1000);
    
    var day = $('#day').width();
    var time = $('#time').width() + $('#hour').width() + 10;
    var date = $('#date').width();
    
    if(date > day && date > time){
     alert('date');
        
    }else if (time > day && time > date){
        var lengthDay = $('#day').html().length-1;
        var differenceDay = time-day;
        var letterDay = differenceDay / lengthDay;
        
        var lengthDate = $('#date').html().length-1;
        var differenceDate = time-date;
        var letterDate = differenceDate / lengthDate;
        
        $('#day').css({'letter-spacing':letterDay});
        $('#date').css({'letter-spacing':letterDate});
    }else{
     alert('day');
    }
    
}

.clock {
  font-family:Arial,sans-serif;
  color:#bbb;
  font-size: 44px;
}
#day{
  display:inline-block;
}
#time {
  display:inline-block;
  letter-spacing:3px;
}
#hour {
  margin-left:10px;
  display:inline-block;
  font-size:28px;
}
#date {
  font-size:30px;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="clock" id="day"></div><br>
<div class="clock" id="time"></div>
<div class="clock" id="hour"></div><br>
<div class="clock" id="date"></div>

---

示例