Question

这是我的HTML我有3个包含文本的方框，只读取第一个div中的文本。

html,
body {
	background-position: fixed;
	background-attachment: fixed;
	background-size: auto;
	background-color: #e2e1e0;
	background-repeat: no-repeat;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
	user-select: none; 
	z-index: 1;
}


.header{
font-family: 'Poiret One', Arial;
color: black;
font-size: 2em;
border-radius: 10px;
border-color: black;
border-style: 
}

.infodiv {
  background: #fff;
  border-radius: 5px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  width: 300px;
}

.statsdiv {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  font-family: 'Oswald', Arial;
}

.statsdiv:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.playerdiv {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  font-family: 'Oswald', Arial;
}

.playerdiv:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.seconddiv {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  font-family: 'Oswald', Arial;
}

.seconddiv:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

<html>
  <head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
<body>
<center>

<h1 class="header">Heading Placeholder</h1>
<hr>
<!--Statistic's Division-->
<div class="infodiv statsdiv">
<center>
<i class="fa fa-clock-o"></i><br><p>This first box moves the more I type, it allows me to type up to 3 lines of text but after that it becomes higher in position for example here X X X<p>
</center>
</div>
<!--Player Division-->
<div class="infodiv playerdiv">
<center>
<i class="fa fa-line-chart"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>
<!--Informational Division-->
<div class="infodiv seconddiv">
<center>
<i class="fa fa-check-circle-o"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>

</center>

</body>
</html>

我不认为它运作良好，但如果你能把它快速地放在记事本中它应该可以解决我遇到的问题。目前在HTML中我放了3个字母'X'删除那些3 X并且问题应该解决。问题是它只允许我添加3行文本。

如果你不明白我还想说什么，请告诉我。几年前我在高中只上过一门计算机科学，所以这可能很难看：/

Answer 1

添加此CSS

 .infodiv {
  float: left;
  background: #fff;
  border-radius: 5px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  width: 300px;
 }

Answer 2

将tempObject={ key0: 'value0', key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4' }添加到vertical-align:top; 即：

.infodiv

我在我的框中键入文本，它移动得越多我输入

2 个答案: