Question

我正在尝试根据用户输入制作一个div网格。即 - 用户输入数字10，我创建一个10x10网格的div。无论网格内部的方格数如何，网格的整体大小都应该相同。

我最初开始使用4x4网格表以1000x1000像素开始页面。我遇到的问题是，如果我只设置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就行了）

此外，如果您使用的是内联块元素，则必须在容器上将font-size设置为0（否则html源代码中的空格也会增加一些空格，您可以随时切换回所需的字体通过将font-size: somevalue应用于您的孩子的大小，在这种情况下为.indivCell）：

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

您也可以使用HTML代码来删除空格，如下所示：

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

我强烈建议坚持使用内联块而不是浮点数，浮点数对于文档流程来说简直差得多。

Answer 2

有两个问题需要解决。首先，内联元素对代码中的空白区域很敏感，因此您需要将其删除，或者执行诸如浮动div之类的操作，以便它们折叠并消除空间。

第二个问题是盒子模型（元素在其尺寸，边距和边框方面实际占用了多少空间）以及它在各种浏览器中的假设。最常见的解决方案是将box-sizing设置为border-box。正如MDN所解释的那样，“宽度和高度属性包括填充和边框，但不包括边距。”

这样做可以让你让你的div适合你想要的。

<强> jsFiddle example

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

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

2 个答案: