大量元素的行内块元素之间的垂直间隙答案

【问题标题】：Vertical gaps between inline-block elements for big amounts of elements大量元素的行内块元素之间的垂直间隙
【发布时间】：2016-10-17 19:34:09
【问题描述】：

我目前正在为 The Odin Project 执行 JS/jQuery Project，我认为我的解决方案表现非常好。

我遇到的问题是，对于更大量的元素（在 JSFiddle 中它开始打破每行大约 40-45 个元素，在我的 Chrome 浏览器中大约为 50-52），之间会有一个垂直间隙相邻两行的元素。我最初设置vertical-align: top 来消除间隙，每行最多可以使用提到的 40-50 个元素。

Here is the JSFiddle.

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

这不是我正在寻找的行为。我想要一个连接的网格，两边的单元格之间没有间隙。知道是什么破坏了vertical-align: top 吗？

编辑：我认为这与百分比宽度/高度有关，因为如果除法的结果是“困难分数”，它也会在低于 40 的数字上中断。 p>

【问题讨论】：

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

标签： javascript jquery html css

【解决方案1】：

内联框从其块父框继承可继承的属性。因此，您的网格占用了line-height 的.container。当.container 溢出时vertical-align: top; 停止工作，所以最好将line-height:0; 用于父元素（.container）。

来源：https://www.w3.org/TR/CSS2/visuren.html#inline-boxes

$(document).ready(function() {
    createGrid(48);
    $(".cell").mouseenter(function() {
        $(this).css("background-color", "green");
    });
    $(".cell").mouseleave(function() {
        $(this).css("background-color", "white");
    });
});

function createGrid(n) {
    var container = $(".container");
    container.empty();

    var sizeP = 100 / n;

    var cell = $('<div/>', {
        class: 'cell',
        style: 'width: ' + sizeP + '%; height: ' + sizeP + '%;'
    });

    for(i = 0; i < n*n; i++) {
        container.append(cell.clone());
    }
}

.container {
    border: 5px solid black;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    width: 800px;
    height: 800px;
    line-height:0;
}

.cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid black;
    vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<body>
  <div class="container"></div>
</body>

【讨论】：