Javascript 文本内容倒计时天数、分钟、秒动态移动

我有这段代码，倒计时运行正常，但问题是当开始计数时，新行中的文本内容显示不同。我希望文本内容和计时器显示固定。请帮忙，谢谢

var countDownDate=新日期（“2018年12月25日”）.getTime（）；
var x=setInterval（函数（）{
var now=new Date（）.getTime（）；
var距离=倒计时日期-现在；
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
var left=document.getElementById（'time'）；
左。子节点[0]。textContent=“+days+”“+hours+”
+分钟+“”+秒+“”；
left.childNodes[1].textContent=“天”+“小时”+“分钟”+“秒”；
如果（距离<0）{
净间隔（x）；
document.getElementById（“左”）.innerHTML=“过期”；
}
}, 1000);
#时间#左{
颜色：黑色；
字体大小：70px；
边缘顶部：10px；
}
#时间#日期{
颜色：#0000FF；
字体大小：90px；
利润上限：-28px；
}




var countDownDate=新日期（“2018年12月25日”）.getTime（）；
var x=setInterval（函数（）{
var now=new Date（）.getTime（）；
var距离=倒计时日期-现在；
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
var countdownDiv=document.getElementById（'countdown'）.children；
countdownDiv[0]。innerHTML=''+days+''+days'；
countdownDiv[1]。innerHTML=''+hours+''+hours'；
countdownDiv[2]。innerHTML=''+minutes+''+minutes'；
countdownDiv[3]。innerHTML=''+seconds+''+seconds'；
如果（距离<0）{
净间隔（x）；
document.getElementById（'countdown'）.innerHTML=“过期”；
}
}, 1000);
#倒计时{
宽度：400px；
}
#倒计时>div{
浮动：左；
宽度：25%；
}
.cnt、.txt{
文本对齐：居中；
}
.cnt{
字体大小：30px；
颜色：黑色；
}
.txt{
字体大小：15px；
颜色：#0000FF；
}

创建布局的最简单方法可能是使用表格，但不建议我们使用表格谁是我们，谁是推荐人？事实上，这没关系，如果你应该如何解决这个问题有限制，你应该在你的问题中提到它们。我的教授他希望我使用文本内容而不是表格非常感谢你的帮助不要使用
\t
使用
&emsp
或
或该问题答案中的任何建议。