页面代码
<div class="transfer"></div>
<div class="operations"></div>
<div class="transfer"></div>
.transfer{
display: inline-block;
width: 380px;
height: 208px;
border: 1px solid #D5DEED;
background-color: #3a835d;
}
.operations{
display: inline-block;
width: 30px;
height: 208px;
margin: 0px 14px;
background-color: #3a835d;
}
如果给第一个div插入内容,例如:111,
插入内容的div会与别的div产生错位。
原因
- 同一行的行内元素对齐方式默认是底部对齐,即
vertical-align:baseline
- 对于内容为空的
inline-block
元素而言,该元素的基线就是它的margin底边缘,否则就是元素的内部最后一行内联元素的基线
解决方法
- 更换布局方法,采用float布局,考虑脱离流后后面元素不易控制,故不首选
- 改变vertical-align属性为
vertical-align:top
,把元素的顶端与行中最高元素的顶端对齐