<分区>
我正在尝试创建一个棋盘。我正在使用嵌套循环来做这件事。问题是 block 的两个水平行之间存在间隙。下面我为 3x3 板创建了一个片段。
const board = document.querySelector('#board');
const colors = ["black","gray"]
function start(){
for(let i = 0;i<3;i++){
let br = document.createElement('br')
for(let j = 0;j<3;j++){
let block = document.createElement('div');
block.classList.add('block');
let id = (i * 8) + j
block.id = id;
block.style.backgroundColor = colors[(id+i) % 2]
board.appendChild(block)
}
board.appendChild(br)
}
}
start().block{
height: 70px;
width: 70px;
display:inline-block;
}<div id="board"></div>我已经着手解决使用 float:left 而不是 display:inline-block 的解决方案。我怎样才能消除差距？
我也想看看有没有更好的创建棋盘的代码？