テキストが長く、コンテンツが下部に移動する

Question

JavaScriptを使って5秒ごとにテキストを変更しています。長いテキストを追加するとテキストが下に移動しますが、テキストが短いとすべて後ろに移動します。何故ですか ？ Javascriptを：それは分周器の底にすべてのロゴH1テキストをダウン取る長文にテキストを変更

var text = ["Piedāvājam visdažādākās spēles un lietotnes ar VR HTC brillēm, kas ir piemērotas jebkuram vecumam, sākot no 10 gadiem.", "Dzimšanas diena, vārda diena, vecpuišu vai vecmeitu ballīte vai kādi citi svētki VR Room ir ideāls risinājums, kur jautri pavadīt laiku kompānijai līdz 10 cilvēkiem. Ir iespējams uzklāt galdu saviem viesiem.", "Pusotras stundas seanss uz kompāniju līdz 10 cilvēkiem tikai pa 50 EUR."]; 
 
var counter = 0; 
 
var elem = document.getElementById("changeText"); 
 
setInterval(change, 5000); 
 
    
 
function change() { 
 
    elem.innerHTML = text[counter]; 
 
    $('#header').fadeIn(1000); 
 
    counter++; 
 
    if (counter >= text.length) { 
 
    counter = 0; 
 
    } 
 
} 
 
    
 
function changeBackgroundSmoothly() { 
 
    $('#header').fadeOut(1000, changeBg); //this is new, will fade out smoothly 
 
} 
 
    
 
setInterval(changeBackgroundSmoothly,5000);

#header { 
 
    position: relative; 
 
    background-image: url("../../images/header.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-attachment: fixed; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 7.5em 0 2em 0; 
 
    cursor: default; 
 
    text-overflow: ellipsis 
 
} 
 
    
 
#header:before { 
 
\t content: ''; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t height: 100%; 
 
} 
 
    
 
#header .inner { 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 50; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
    \t \t 
 
#header header { 
 
    display: inline-block; 
 
} 
 
    
 
#header header > p { 
 
    font-size: 1.25em; 
 
    margin: 0; 
 
    text-overflow: ellipsis 
 
} 
 
    
 
#header h1 { 
 
    color: #fff; 
 
    font-size: 3em; 
 
    float: left; 
 
    line-height: 2em; 
 
} 
 
#header header \t img { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Header --> 
 
\t \t 
 
\t \t \t <div id="header" > 
 
\t \t \t <div id="sliderB" ><img style="width:100%;height:100%;" id='myimage' /></div> 
 
\t \t \t 
 

 
\t \t \t \t <!-- Inner --> 
 
\t \t \t \t \t <div class="inner"> 
 
\t \t \t \t \t \t <header> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <h1><a id="logo" >VR Room</a></h1> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <p id="changeText" > Pirmā Latvijā virtuālās realitātes istaba – “VR room”. Tu pat nevari iedomāties savu reākciju!</p> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t </header> 
 
\t \t \t \t \t \t <footer> 
 
\t \t \t \t \t \t \t <a href="#banner" class="button circled scrolly">Start</a> 
 
\t \t \t \t \t \t </footer> 
 
\t \t \t \t \t </div>

。私の状況でもっとうまくいくものがあるのでしょうか？ この問題を解決するにはどうしたらうまくいかないのですか？私の母国語ではなく、悪い言語で申し訳ありません。

Answer 1

マークアップにclosing divタグがありません。マークアップのフォーマットを改善してください。何が起こっているのかを見るのがはるかに簡単です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<!-- Header --> 
<div id="header"> 
    <div id="sliderB"> 
    <img style="width:100%;height:100%;" id='myimage' /> 
    </div> 


    <!-- Inner --> 
    <div class="inner"> 
    <header> 

     <h1><a id="logo">VR Room</a></h1> 

     <p id="changeText">Pirmā Latvijā virtuālās realitātes istaba – “VR room”. Tu pat nevari iedomāties savu reākciju!</p> 

    </header> 

    <footer> 
     <a href="#banner" class="button circled scrolly">Start</a> 
    </footer> 

    </div> 
</div> 

しかし、あなたの質問に答えるために：それはHTML要素がスペースを取る方法ですので、それが長くなるときにテキストは時々狭い画面でごH1の下にラップしています。それらを列に分割して保持したい場合は、マークアップまたはスタイルを変更する必要があります。