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

我正在努力用正方形单元格完全填充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>

    

最佳答案

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

你能做什么？


将宽度更改为48
或使用box-sizing: border-box;
或放下边框以勾勒轮廓
或对Flexbox或网格使用现代方法。

关于javascript - 为什么正方形不适合div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49760667/