Question

我正在尝试创建一组显示在固定大小容器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++;
    }
}

Answer 1

css 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; }：

apply

Fiddle

Answer 2

使用box-sizing并将其设置为border-box，以便在计算宽度时考虑边框

.square {
    /* your other styles omitted */
    box-sizing: border-box;
}

Div不适合他们的容器，他们添加了像素。

2 个答案: