『解疑』两个div使用了display：inline-block后出现错位问题解决

最新推荐文章于 2024-05-10 14:35:37 发布

原创最新推荐文章于 2024-05-10 14:35:37 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了两个使用inline-block样式的div元素出现错位的原因，并提供了通过添加vertical-align:top样式来解决此问题的方法。

问题

当两个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>