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

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

DemoJx

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

阅读量2.4k

点赞数 6

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/DemoJx/article/details/102496117

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题

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