javascript - 如何使可变数量的 div 100% 填充父容器？

Question

我正在尝试根据用户输入制作一个 div 网格。即 - 用户输入数字 10，我创建一个 10x10 的 div 网格。网格的整体大小，无论其中有多少个正方形，都应该是相同的大小。

我最初使用 1000x1000 像素的 4x4 网格表格开始页面。我遇到的问题是，如果我只设置 divs = 容器 div 的高度/宽度的 25%，它们就不适合(即使弄乱负边距以删除空间)。我假设这是因为父 div 容器有一个边框，每个 div 都有一个边框，它们都占用了可用空间。

我可以轻松地调整尺寸以使其合身。我的问题是我知道一旦我开始改变正方形中的网格数量，这个固定数字将不再有效。我如何设置 div 来填充容器，同时考虑边框大小等等？这是我到目前为止所拥有的:

https://jsfiddle.net/14Lnera5/1/

.wrapper {
margin: auto 50 auto auto;
width: 1000px;
height: 1000px;
border: black 4px solid;
}

.indivCell {
display: inline-block;
border: black 1px solid;
background-color: #E0E0D1;
width: 25%;
height: 25%;  
margin: -1px;
}

我不一定需要答案，但一两个提示会很好。我一直在到处搜索这个，每个人都说只是将大小设置为百分比，但我不认为这会起作用，因为放入更多的 div 会增加它内部的边框数量，因此摆脱可用空间。

谢谢

Answer 1

您可能正在寻找 box-sizing (一旦应用于页面上的每个元素，它就可以成为真正的游戏规则改变者，如下所示):

* {
    box-sizing: border-box;
}

(尽管在您的情况下，仅将其应用于 .indivCell 就可以解决问题)

此外，如果您使用内联 block 元素，则必须将容器上的字体大小设置为 0(否则 html 源代码中的空白也会增加一些空间，您可以随时切换回所需的字体通过将 font-size: somevalue 应用于您的 child 来调整大小，在本例中为 .indivCell):

https://jsfiddle.net/14Lnera5/4/

您还可以像这样修改 HTML 代码以删除空格:

http://jsfiddle.net/14Lnera5/8/

我强烈建议坚持使用内联 block 而不是 float ， float 对您的文档流来说简直太糟糕了。