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

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

你可以通过说“当我说宽度，我的意思是内容，填充和边框一起来解决这个问题”来解决这个问题。为此，您应该添加以下CSS：

box-sizing: border-box;

要在JavaScript中执行此操作，您需要编写

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

Answer 2

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

你能做什么？

将您的宽度更改为48
或使用box-sizing: border-box;
或删除边框以显示大纲
或使用flexbox或grid的现代方法。

为什么正方形不适合div

2 个答案: