在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位。
-
<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>
其实为其中一项指定基准线即可,