如何在javascript加载时修复fluid div标记

首先，我很抱歉没有提供更好的标题，可以清楚地描述我的问题。这里是我的问题我有以下代码块，它是创建一个显示时间标签给我的用户。正在显示使用JavaScript span元素之间如何在javascript加载时修复fluid div标记

<div class="content"> 
    <div class="container"> 
    <div class="card"> 
     <div class="card-header" data-background-color="purple"> 
     <h4 class="title"><h3 class="title"><span id="countdown" class="timer"></span></h3></h4> 
     </div> 
    </div> 
    </div> 
</div>

时间，现在的问题是，当JavaScript加载时间为每个页面刷新后的第一时间，标签显示时间成为一半是通常的大小，因为span标签是空的。我需要显示标签保持相同的高度，无论是否有内容，span标签内。任何人都可以帮我解决这个问题？原谅我的英语。

来源

2017-03-02 Ngenazy

请提供JavaScript和CSS以及因此我们可以重现的问题 – APAD1

可能的复制[如何设置SPAN height属性（http://stackoverflow.com/questions/ 2343989 /如何设置高度属性的跨度） –

在<span>内设置默认值。你可以写loading...,00:00或者输入 。

来源

2017-03-02 16:48:12 Soviut

@ Soviut-这一个钉牢它，正是我所期待的。 – Ngenazy

也许会在<span>内部的非破坏性空间 中下降，这样浏览器就有了某些东西可以使用。在Javascript准备启动后，它可以安全地替换你的时间。

来源

2017-03-02 16:46:08 Gwellin

为什么不把有意义的东西放在可达性范围内，但为了显示目的将其设置为opacity: 0;，那么当范围更新并准备好显示时，将其设置为opacity: 1;。用opacity（或visibility: hidden;）隐藏某些内容会保持页面布局。

setTimeout(function() { 
 
    var cd = document.getElementById('countdown'); 
 
    cd.innerHTML = 'ready'; 
 
    cd.classList.add('ready'); 
 
},1000)

.timer { 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
} 
 
.ready { 
 
    opacity: 1; 
 
}

<h4 class="title"><h3 class="title"><span id="countdown" class="timer">Loading</span></h3></h4>

来源

2017-03-02 16:49:05

如何在javascript加载时修复fluid div标记

回答

相关问题