css总结 -使用display：inline-block，出现元素高度错位

在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。

<style>
.left{
    display:inline-block;
    height:110px;
    width:110px;
}
.right{
display:inline-block;
height:110px;
width:110px;
}
</style>

<div class='container'>
    <div class="left"></div>
    <div class="right"></div>
</div>

调整方法，就是为他们指定基准线

<style>
.left{
    display:inline-block;
    height:110px;
    width:110px;
    vertical-align:top
}
.right{
display:inline-block;
height:110px;
width:110px;
vertical-align:top
}
</style>

<div class='container'>
    <div class="left"></div>
    <div class="right"></div>
</div>

 

其实为其中一项指定基准线即可，