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

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>

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

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄

×

选择打赏方式：

微信 QQ钱包 支付宝

打赏

打赏

打赏

多少都是心意！谢谢大家！！！