html - How to correctly style linebreaks in this javascript -


https://jsfiddle.net/mrnf4q7g/

i've been trying set fiddle onto 2 lines such as:

123     20        13     03 days    hours     min    sec  

i've tried using br , \n tends staircase down page.

create 4 separate elements within #countdown element

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

then set elements display: inline-block

.sect {     display: inline-block; } 

then set each element's innerhtml separately , include line-break

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 = 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;  }    {    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>


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -