css
我正在尝试创建一组显示在固定大小容器div中的div。使用javascript我可以创建我想要的div数量。我的问题是div不能水平或垂直地放入容器中。容器div的高度和宽度应该是1000px，这是我在css中设置的，而它的高度和宽是1002px，我在检查页面后意识到了这一点。较小的正方形还在高度和宽度上增加了2px，这意味着任何超过1x1网格的东西都无法放入容器。我真的不知道为什么会发生这种事。如有任何帮助，我们将不胜感激。
链接到jsfiddle：https://jsfiddle.net/wrjo38t5/
HTML:
<body>
<button type="button">Reset</button>
<div id= "container">
</div>
<script src="jQuery.js"></script>
<script src="javascript.js"></script>
</body>
CSS：
div {
border: 1px dashed black;
height: 1000px;
width: 1000px;
font-size: 0;
}
.square{
float: left;
font-size: 0;
border: 1px dashed red;
display: inline-block;
}
Javascript：
var gridSize = prompt("Enter size of grid:");
gridSize = Number(gridSize);
createGrid(gridSize);
function createGrid(gridSize){
//setting up variables
var newSize = 1000/gridSize;
var j = 1;
var i = 1;
var cont = document.getElementById('container');
//loop to add a column square
while(i<=gridSize){
var sketchSquare = document.createElement('div');
sketchSquare.className= "square";
sketchSquare.style.width= newSize + "px";
sketchSquare.style.height= newSize + "px";
cont.appendChild(sketchSquare);
//if statement to add new row
if (i === gridSize && j < gridSize) {
j++;
i = 0;
}
i++;
}
}
border增加了宽度和高度。尝试改用outline：
div {
outline: 1px dashed black;
height: 1000px;
width: 1000px;
font-size: 0;
}
.square{
float: left;
font-size: 0;
outline: 1px dashed red;
display: inline-block;
}
Fiddle
使用框大小并将其设置为边框框，以便在计算宽度时考虑边框
.square {
/* your other styles omitted */
box-sizing: border-box;
}