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

 

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

1.  
   <style>
2.  
   .left{
3.  
   display:inline-block;
4.  
   height:110px;
5.  
   width:110px;
6.  
   }
7.  
   .right{
8.  
   display:inline-block;
9.  
   height:110px;
10.  
    width:110px;
11.  
    }
12.  
    </style>
13.  
     
14.  
    <div class='container'>
15.  
    <div class="left"></div>
16.  
    <div class="right"></div>
17.  
    </div>

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

1.  
   <style>
2.  
   .left{
3.  
   display:inline-block;
4.  
   height:110px;
5.  
   width:110px;
6.  
   vertical-align:top
7.  
   }
8.  
   .right{
9.  
   display:inline-block;
10.  
    height:110px;
11.  
    width:110px;
12.  
    vertical-align:top
13.  
    }
14.  
    </style>
15.  
     
16.  
    <div class='container'>
17.  
    <div class="left"></div>
18.  
    <div class="right"></div>
19.  
    </div>

 

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