问题
当两个div使用了display:inline-block样式后,会出现错位的情况:
两个外层div出现了错位,没有预期的水平对齐的效果。
问题分析
出现这种情况的原因是,第二个外层的div会相对于第一个 外层div 中最后渲染出来的 内层div 的顶部对齐,所以才出现了这种错位的情况,如下所示:
解决
给每个外层div设置 vertical-align:top 样式,把每个外层div的顶端与行中最高元素的顶端对齐。
添加该样式后:
具体代码如下:
<head>
<meta charset="utf-8">
<title></title>
<style>
.one {
display:inline-block;
border:1px solid black;
width:100px;
height:100px;
//vertical-align:top;解决问题的关键样式
}
</style>
</head>
<body>
<div class="one">外层<div style='border:1px solid black;'>内层</div><div style='border:1px solid black;'>内层</div><div style='border:1px solid black;'>内层</div></div>
<div class="one">外层</div>
</body>