这是我的代码：
#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>显示为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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句