如何在JavaScript中正确设置换行样式

Question

https://jsfiddle.net/mrnf4q7g/

我一直在尝试将这个代码片段设置成两行，例如：

123     20        13     03
Days    Hours     Min    sec 

我尝试使用br和\n，但它会导致页面逐渐向下错位。

- s0rfi949

---

我认为你可以在这种情况下使用 <table> 标签。 - Surely

Answer 1

正如xwhtLikeThis所说，您可以使用以下表格：

<table>
  <tr>
    <td>123</td>
    <td>20</td>     
    <td>13</td>
    <td>03</td>
  </tr>

  <tr>
   <td>Days</td>
   <td>Hours</td>       
   <td>Min</td>
   <td>Sec</td>
  </tr>

</table>

- Matt

Answer 2

我没有时间为你编写一个 fiddle，但这是我的建议。首先不要使用任何 JavaScript 来编写你的 HTML，然后将该 HTML 作为模板，编写以下此类函数：

function updateTime(days, hours, min, sec) {
    var html = "
    <div class='row'>
        <div id='days'>"+days+"</div>
        <div id='hours'>"+hours+"</div>

        ..etc

    </div>
    ";
    document.getElementById(id).innerHTML = html;
}

在我看来，使用起来更加方便和易于样式化，甚至可以尝试使用https://mustache.github.io/

- Evan Fajardo

Answer 3

你是在寻找类似这样的东西吗？

如果您需要对此回答进行任何改进，请留下评论。

CountDownTimer('October 21, 2015 19:00:00', 'countdown');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        var now = new Date();
        var distance = end - now;

        if (distance < 0) {   
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';
            return;
        }

        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        
        document.getElementById(id).innerHTML =  '<div class="FL M5">' + days + '<br> days </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + hours + '<br> hours </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + minutes + '<br> mins ';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + seconds + '<br> secs </div>';
    };
    
    timer = setInterval(showRemaining, 1000);
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.FL{
  float:left;
}

.CB{
  clear:both;
}

.M5{
  margin:5px;
}

<div id="countdown"></div>

这篇文章对您有所帮助吗？

- Gerasimos Pap

Answer 4

在你的 #countdown 元素内创建四个独立的元素。

<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

然后将这些元素设置为display:inline-block。

.sect {
    display: inline-block;
}

然后分别设置每个元素的 innerHTML，并包含一个换行。

days.innerHTML = Math.floor(distance / _day) + '<br> days ';
hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';

CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        var now = new Date();
        var distance = end - now;

        if (distance < 0) {   
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';
            return;
        }
        
        days.innerHTML = Math.floor(distance / _day) + '<br> days ';
        hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
        mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
        secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
    };
    
    timer = setInterval(showRemaining, 1000);
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.sect {
    display: inline-block;
}

<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

- user4639281