Javascript 大量元素的内联块元素之间的垂直间隙

我目前正在为Odin项目进行测试，我认为我的解决方案执行得非常好

我遇到的问题是，对于数量较大的元素（在JSFIDLE中，每行大约有40-45个元素，在我的Chrome浏览器中大约有50-52个元素），相邻两行的元素之间会有一个垂直间隙。我最初设置了

vertical align:top

，以消除间隙，每行最多可使用40-50个元素

如果您提高JS文件中每行的元素数量（设置为50或更高），您就会明白我的意思

这不是我想要的行为。我想要一个连接的电网，两边的电池之间没有间隙。你知道是什么打破了垂直对齐：顶部

---

编辑：我认为这与宽度/高度百分比有关，因为如果除法的结果是一个“难分数”，则40以下的数字也会被打断。

内联框从其块父框继承可继承的属性。因此，网格采用

容器的
线高度
。
.container
溢出时
垂直对齐：顶部
停止工作，所以最好使用
行高：0到父元素（
.container
）

资料来源：


$（文档）.ready（函数（）{
createGrid（48）；
$（“.cell”）.mouseenter（函数（）{
$（this.css（“背景色”、“绿色”）；
});
$（“.cell”）.mouseleave（函数（）{
$（this.css（“背景色”、“白色”）；
});
});
函数createGrid（n）{
var container=$（“.container”）；
container.empty（）；
var sizeP=100/n；
变量单元格=$（''{
类别：'单元格'，
样式：“宽度：'+sizeP+'%；高度：'+sizeP+'%；”
});
对于（i=0；i

.container{
边框：5px纯黑；
边界半径：5px；
填充：10px；
利润率：10px；
宽度：800px；
高度：800px；
线高：0；
}
.细胞{
显示：内联块；
框大小：边框框；
边框：1px纯黑；
垂直对齐：顶部；
}

如果您使用
浮点
而不是
内联块
，问题将得到解决。哇，谢谢！你能解释一下，为什么这会解决问题，或者是某种奇怪的内联块特定的东西吗？这个问题打破了两条规则，所以我不知道为什么当更好的问题被否决时，它会被否决：寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括所需的行为，一个特定的问题或错误，以及在问题本身中重现它所需的最短代码。另外，如果您不想使用float，那么指向jsfiddle.net的链接必须附带代码——问题的主要原因是，当您获得超过40个块时，一行上的块数量意味着这些块现在小于导致额外空间的行高度。如果您想继续使用display:inline块而不是浮动块，只需将容器的行高度设置为零，这是站点Luca的规则。这是一个资源站点，因此它对未来的访问者很有用。如果您对JSFIDLE的链接失效，那么这个问题对将来的任何人都没有用处。此外，如果您不喜欢代码墙，那么只需制作一个代码片段并将其隐藏即可。仅仅因为你不喜欢某样东西并不意味着你可以违反规则——你不会仅仅因为你不喜欢某样东西就违法吗？