首先看示例代码:
<div class="test-div">测试数据</div>
<div class="test-div"></div>
.test-div{
display: inline-block;
margin-left: 20px;
width: 100px;
height: 100px;
border: #19be6b 2px solid;
}
效果如下,填充内容后两个div发生错位:
解决办法:在div的样式中加上
vertical-align: top;
.test-div{
display: inline-block;
vertical-align: top;
margin-left: 20px;
width: 100px;
height: 100px;
border: #19be6b 2px solid;
}
效果: