为什么正方形不适合 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;
• 或删除轮廓的边框
• 或者使用带有弹性框或网格的现代方法。

Answer 2

您将每个单元格的内容宽度设置为 50px，然后在每侧添加 1px 边框，使每个单元格的总宽度为 52px。这不能均匀地放入 400px 宽度的容器中。

您可以通过说"当我说宽度时，我的意思是内容、填充和边框！为此，您应该添加以下 CSS：

box-sizing: border-box;

要在 JavaScript 中做到这一点，你需要写

cell.style["box-sizing"] = "border-box";
// or
cell.style.boxSizing = "border-box";