Question

我目前正在为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以下的数字上中断。

Answer 1

内联框从其父块框继承可继承的属性。因此，您的网格正在line-height .container。如果.container溢出vertical-align: top;停止工作，那么将line-height:0;用于父元素（.container）会更好。

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

＆＃13;

$(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());
    }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

内联块元素之间的垂直间隙，用于大量元素

1 个答案: