Wie Flüssigkeit div-Tag zu beheben, wenn JavaScript ist

Zunächst einmal bin ich lade leider keinen besseren Titel bietet, die meine problem.Here klar beschreiben kann mein Problem ist, ich habe folgende Code-Block, die für die Anzeige von Zeit, um ein Etikett zu schaffen zu meinem Benutzer.Wie Flüssigkeit div-Tag zu beheben, wenn JavaScript ist

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

Zeit zwischen dem span Elemente mit Hilfe von JavaScript, jetzt ist das Problem angezeigt wird, dass, wenn JavaScript ist Zeit zum ersten Mal nach jeder Aktualisierung der Seite geladen wird, das Etikett Zeit wurde Halb Anzeige, weil die übliche Größe ist es span Tag ist empty.I die Anzeigebezeichnung müssen die gleiche Höhe, unabhängig davon, zu halten, ob es Inhalt oder nicht, innerhalb span tag.Anyone, der mir dieses Problem beheben kann helfen? mein Englisch Verzeihen.

Quelle

2017-03-02 Ngenazy

Bitte geben Sie die Javascript und CSS auch, damit wir das Problem – APAD1

Mögliche Duplikat neu erstellen können [Wie Höhe Eigenschaft für SPAN zum Einstellen] (http://stackoverflow.com/questions/ 2343989/how-to-set-height-Eigenschaft-for-span) –

einen Standardwert innerhalb des <span> einstellen. Sie könnten eine  loading..., 00:00 oder setzen schreiben.

Quelle

2017-03-02 16:48:12 Soviut

@ Soviut-Dieser hat es genau genagelt, was ich gesucht habe. – Ngenazy

Vielleicht fallen in einem nicht-brechenden Raum   innerhalb der <span>, so dass es etwas für den Browser gibt, aufzugreifen. Es kann sicher mit Ihrer Zeit nach dem Start von Javascript ersetzt werden.

Quelle

2017-03-02 16:46:08 Gwellin

Warum nicht etwas Bedeutungsvolles in den Bereich für Zugänglichkeit setzen, sondern es für Anzeigezwecke auf opacity: 0; setzen, dann, wenn der Bereich aktualisiert und zur Anzeige bereit ist, setzen Sie es auf opacity: 1;. Durch das Ausblenden von Objekten mit opacity (oder visibility: hidden;) wird das Layout auf der Seite beibehalten.

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>

Quelle

2017-03-02 16:49:05

Wie Flüssigkeit div-Tag zu beheben, wenn JavaScript ist

Antwort

Verwandte Themen