DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法

最新推荐文章于 2025-09-07 13:33:34 发布

原创最新推荐文章于 2025-09-07 13:33:34 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端开发 #脚本 #jquery

Web前端专栏收录该内容

115 篇文章

订阅专栏

本文解决使用display: inline-block后DIV元素布局不齐的问题，通过设置vertical-align：top实现元素对齐。适用于360、搜狗、猎豹极速模式等浏览器。

<div>
	<div style="display:inline-block"></div>
	<div style="display:inline-block"></div>
	<div style="display:inline-block"></div>
	<div style="display:inline-block"></div>
</div>

情景代码如上。
出问题的浏览器：
360，sogou，猎豹的极速模式
给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。
解决方法：
给div设置vertical-align：top

<div>
	<div style="display:inline-block;vertical-align：top"></div>
	<div style="display:inline-block;vertical-align：top"></div>
	<div style="display:inline-block;vertical-align：top"></div>
	<div style="display:inline-block;vertical-align：top"></div>
</div>