css - 当我输入文本时，子 div 向下移动

Question

这是我的代码:

#wrapper {
	margin: 0 auto;
	display: block;
	width: 1200px;
	border: 1px solid red;
}

div {
	width: 150px;
	height: 200px;
	border: 1px solid red;
	display: inline-block;
	margin-right: 80px;
}
	

<div id="wrapper">
 <div>this is test. this is test.</div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

Answer 1

永远记得为 inline-block 元素定义 vertical-align。

#wrapper {
	margin: 0 auto;
	display: block;
	width: 1200px;
	border: 1px solid red;
}

div {
	width: 150px;
	height: 200px;
	border: 1px solid red;
	display: inline-block;
  vertical-align: top; /* add this always with inline-block */
	margin-right: 80px;
}

<div id="wrapper">
 <div>thisd ihd sofjdlkfj dlkfjdlkfj d</div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>