使用Javascript/jQuery，如何更改div的高度/宽度以避免'；容器分区中没有剩余空间吗？

我正在尝试使用HTML/CSS/Javascript/jQuery制作一个基本的画板。网格本身有一个设置的大小，但是当单击按钮时，用户会被询问他们希望网格/画板有多大。输入金额后，将创建一个新网格。我正在完成的项目说，容器div的高度/宽度不应该更改，但是.square div应该根据输入进行更改（例如，如果用户想要5乘5的网格，.square div将根据输入更改大小）。我已经这样做了，但我遇到了两个大问题：

1） container div中通常有剩余空间，因此其中一个.square div比其他div小得多，并且

2） 我不知道如何确保横过和向下的div数相同-6乘6，而不是，例如，4乘9

谢谢大家!

这是到目前为止我的代码。如果有麻烦，请提前道歉-我刚刚开始网络开发

HTML:

Javascript/jQuery

$(document).ready(function() {

var squareGrid = 256;

for (i = 0; i < squareGrid; i += 1) {
 $(".container").append('<div class="square"></div>');
}

squareGrid;

$(".square").hover(function() {
    $(this).css("background-color", "green");
}, function() {
    $(this).css("background-color", "green");
    });

$("#clearGrid").click(function() {
    $(".square").css("background-color", "");
    $(".square").remove(); //Removes current grid
    var input = prompt("How big do you want to make your Sketchpad? Enter a number.");
    if(isNaN(input))
        alert("Please enter a number.");

    else {
        $(".square").removeAttr("width");
        $(".square").removeAttr("height");
        for (l = 0; l < (input * input); l += 1) {
            $(".square").css("width", ".container" / input);
            $(".square").css("height", ".container" / input);
            $(".container").append('<div class="square"></div>');
        }
    };

    $(".square").hover(function() {
        $(this).css("background-color", "green");
    }, function() {
        $(this).css("background-color", "green");
    });

}); 
});

$（文档）.ready（函数（）{
var squareGrid=256；
对于（i=0；i

jQuery CSS 确保行和列中有多少正方形的最简单方法是使用表格或使用。我更喜欢

flexbox

而不是

table

或

floats

---

另一个建议：Flexbox

---

这是我为上一篇

做的一篇文章，我不确定创建div并将其用作像素是在web上创建草图程序的最佳方式。我认为canvas将是一种更好的方法来完成您想要的任务。画布说明：画布中的工作草图程序：@Psyco430404这是来自Odin项目的一个项目，它告诉我使用divs。当然，这不是制作画板的最有效方法，但这还只是课程的早期阶段！我刚刚又检查了一遍，我的代码除了一点点之外似乎还能工作。当用户键入值时，jQuery生成的最后一个div始终是我删除所有高度和宽度css值之前的原始大小。你知道为什么会这样吗？你的

for

循环看起来有点不对劲，试试这个：for（var l=0；l<（input*input）；l++）我忘了有一个顶部循环：for（var I=0；I.container { height: 960px; width: 960px; font-size: 0px; margin: 150px auto; } #clearGrid { display: block; margin: 0 auto; } .square { border: 1px solid black; height: 20px; width: 20px; display: inline-block; }

$(document).ready(function() {

var squareGrid = 256;

for (i = 0; i < squareGrid; i += 1) {
 $(".container").append('<div class="square"></div>');
}

squareGrid;

$(".square").hover(function() {
    $(this).css("background-color", "green");
}, function() {
    $(this).css("background-color", "green");
    });

$("#clearGrid").click(function() {
    $(".square").css("background-color", "");
    $(".square").remove(); //Removes current grid
    var input = prompt("How big do you want to make your Sketchpad? Enter a number.");
    if(isNaN(input))
        alert("Please enter a number.");

    else {
        $(".square").removeAttr("width");
        $(".square").removeAttr("height");
        for (l = 0; l < (input * input); l += 1) {
            $(".square").css("width", ".container" / input);
            $(".square").css("height", ".container" / input);
            $(".container").append('<div class="square"></div>');
        }
    };

    $(".square").hover(function() {
        $(this).css("background-color", "green");
    }, function() {
        $(this).css("background-color", "green");
    });

}); 
});

var w = $('.container').outerWidth();

var h = $('.container').outerHeight();

$('.square').outerWidth(w).outerHeight(h);

html {
    box-sizing: border-box;
    font: 500 16px/1.45 Consolas;
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}