当我将文字输入

Question

这是我的代码：

＆＃13;

＆＃13;

#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;
}
	

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

始终记得为vertical-align元素定义inline-block。

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

Answer 2

显示为inline-block的元素与其父基线对齐，因此当它具有内容时向下移动。

给他们一个vertical-align: top值将解决这个问题。

另一种选择是删除内联块并提供wrapper display: flex

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

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

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

Answer 3

将vertical-align: top;添加到您的div的css; D