对于大量的元素，行内块元素之间的垂直间距

Vertical gaps between inline-block elements for big amounts of elements

本文关键字：元素 之间 垂直 于大量      更新时间：2023-09-26

我目前正在为Odin项目做JS/jQuery项目，我认为我的解决方案执行得非常好。

我有它的问题，是对于更大量的元素(在JSFiddle它开始打破每行约40-45个元素，在我的Chrome浏览器约50-52)，将有两个相邻行的元素之间的垂直差距。我最初设置vertical-align: top以删除间隙，这可以达到每行40-50个元素。

这是JSFiddle。

如果您提高JS文件中每行元素的数量(将其设置为50或更高)，您将看到我的意思。

这不是我想要的行为。我想要一个连接的网格，两边的细胞之间没有间隙。你知道是什么破坏了vertical-align: top吗?

编辑:我认为这与percentage-width/height有关，因为如果除法的结果是一个"困难的分数"，它也会在低于40的数字上中断。

内嵌框从它们的块父框继承可继承属性。因此你的网格取.container中的line-height。当.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>

相关文章：