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>

 

其實為其中一項指定基准線即可，