javascript - 为什么正方形不适合放在 div 内

Question

我正在努力用方形单元格完全填充 div 元素。 现在这些方形单元格从 div 中掉出来，不适合等等。 我不确定是什么原因造成的。 有什么想法吗？

var cell_side_len = 50;

var grid_width = 400;
var grid_height = 300;

var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";

for(var i = 0; i < grid_width/cell_side_len; i++){
  for(var j = 0; j < grid_height/cell_side_len; j++){
    var cell = document.createElement('div');
    cell.style.height = cell_side_len + 'px';
    cell.style.width = cell_side_len + 'px';
    cell.style.border = "1px solid black";
    cell.style.float = "left";
    container.appendChild(cell);
   }
}

<div id="container"></div>

    

Answer 1

您遇到的问题是边框不是宽度/高度的一部分。所以你所拥有的一切都是 52px 的宽度，而不是 50px。这是基本的盒子模型。

你能做什么？

• 将宽度更改为 48
• 或使用 box-sizing: border-box;
• 或删除轮廓边框
• 或者使用 Flexbox 或网格等现代方法。