锋言锋语

NferZhuang的自留地

基于display:inline-block布局的间隙

问题描述

在一个页面中需要流式布局显示多个elements,每行显示4个,然后依次换行显示。但是实际出现了,第一行只显示了3个,后续行则显示正常:

%e5%9f%ba%e4%ba%8edisplayinline-block%e5%b8%83%e5%b1%80%e7%9a%84%e9%97%b4%e9%9a%99-1

问题分析

可以看到,第一排的第一个element比较特殊,其他的元素都是同一种类型,而第一个元素则是一个特殊的情况。

第一步:排查elemeng的大小

通过chrome控制台的元素检查,可以看到每一个元素的大小都是一致的,包括margin和padding都是相同的值。

第二步:排查element的位置

通过element.offsetLeft获取到的第一排第二个和第二排第二个的x坐标分别是476和472,看来这个就是问题点了。

问题解决

通过搜索,问题表现和拜拜了,浮动布局-基于display:inline-block的列表布局中描述的非常一致。

在上述博客中,提到“font-size:0;”的解决方案,但是测试说在chrome浏览器下不支持,而我现在(20170224)在chrome(56.0.2924.87)版本下可以正常工作,而作者写这篇博客的时间是2010年11月,可能chrome浏览器在这几年的时间中已经fix了这个问题。

示例代码

我在codepen中,针对该问题做了一个最小复现环境,代码也很简单。

%e5%9f%ba%e4%ba%8edisplayinline-block%e5%b8%83%e5%b1%80%e7%9a%84%e9%97%b4%e9%9a%99-2

参考链接

文 / nfer
LEAVE A REPLY

loading