javascript - 文本很长，将内容移到底部

Question

我有一个 javascript，每 5 秒更改一次文本。当我添加长文本时，它会将文本移到底部，当文本较短时，它会全部移回。这是为什么 ？ Javascript:

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 {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
    
#header .inner {
    position: relative;
    z-index: 1;
    margin: 50;
    display: inline-block;
    vertical-align: middle;
}
    		
#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	img {
    float: left;
    width: 100px;
    height: 100px;
}

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

当它将文本更改为长句时，它会将所有 Logo h1 文本放在分隔符底部。也许有什么可以在我的情况下做得更好？ 如何解决这个问题，为什么它不起作用？抱歉语言不好，不是我的母语。

Answer 1

您的标记中缺少结束 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>

但是，要回答您的问题:当文本变长时，文本有时会在较窄的屏幕上环绕在您的 h1 下方，因为这是 HTML 元素占用空间的方式。如果您想让它们按列划分，您的标记或样式需要更改。