Javascript 如何根据用户输入调整嵌套div的大小

我正在做一个项目。基本上

代码如下：

HTML

Javascript/Jquery

var default_grid_num = 435;
var div_limit = prompt("How large would you like your grid to be?");
var button_prompt = "Would you like to redraw the grids?";
/*var div_limit = prompt("number")*/
$(document).ready(function() {

for(var i = 1; i <= div_limit; i++)
    $(".container").append("<div class='box'></div>");

$(".container > div").hover(function() {
    $(this).css("background-color", "red");
});

$("button").click(function() {
    $(".box").fadeOut();
    if(confirm("Would you like to redraw the grid?")); 
    {
        boxes_per_row = prompt("Define width of grid.");
    }
});


});

var default\u grid\u num=435；
var div_limit=prompt（“您希望网格有多大？”）；
var button_prompt=“是否要重新绘制网格？”；
/*var div_limit=提示（“数字”）*/
$（文档）.ready（函数（）{
对于（var i=1；i我做了一个计算，使用mod运算符
%
和一些数学来确定方框的百分比

我还包括了
max\u per_row
来确定一行中应该显示多少个。
我做了一个测试，使用mod运算符
%
和一些数学来确定框的百分比

我还包括了每行的最大值，以确定一行应该显示多少。
更新

我再次查看了您的示例和您的评论，并得出以下结论：


我稍微编辑了这个示例，这样就不用问两个问题，只问了一个问题：“每行网格有多少个框”（这与您的示例类似）

然后画出一个网格，每一行都包含这个数字，并相应地设置每个蝴蝶结的宽度和高度

这和你想要的更接近吗


我创建了一个JSFIDLE，它在运行时显示两个提示：

1） 你想要多少盒

2） 一排应该放多少个箱子


给出响应后，绘制网格

我稍微编辑了您的CSS，但主要功能由以下几个功能驱动：

function drawbox（）{

负责将divs上的正确数字添加到页面中。完成此操作后，它将调用：

函数重新设置样式（NumberOfBox箭头）{

这只是重置了每个框的CSS宽度，基于用户指定的每行框的宽度

这是否回答了您的问题？
更新

我再次查看了您的示例和您的评论，并得出以下结论：


我稍微编辑了这个示例，这样就不用问两个问题，只问了一个问题：“每行网格有多少个框”（这与您的示例类似）

然后画出一个网格，每一行都包含这个数字，并相应地设置每个蝴蝶结的宽度和高度

这和你想要的更接近吗


我创建了一个JSFIDLE，它在运行时显示两个提示：

1） 你想要多少盒

2） 一排应该放多少个箱子


给出响应后，绘制网格

我稍微编辑了您的CSS，但主要功能由以下几个功能驱动：

function drawbox（）{

负责将divs上的正确数字添加到页面中。完成此操作后，它将调用：

函数重新设置样式（NumberOfBox箭头）{

这只是重置了每个框的CSS宽度，基于用户指定的每行框的宽度

这能回答你的问题吗？
类似的问题吗？从表面上看，你想把一个数字转换成一个百分比，这样每个盒子都会占用容器一定的空间，对吗？@VincentWilkie这正是我想要的。说得再好不过了。@zappdapper-我根据你的反馈更新了我的答案：）什么像这样？从表面上看，你想把一个数字转换成一个百分比，这样每个盒子就占据了容器的一定空间，对吗？@VincentWilkie这正是我想要的。说得再好不过了。@zappdapper-我根据你的反馈更新了我的答案：）这可能行得通，但我该如何将它整合到我的curr中呢ent代码？我想说试试看。根据你问题中的代码，JSFIDLE中的for循环将是for循环所在的位置，JSFIDLE中的
var limit
将是你的
div\u limit
。此外，
max\u per\u row
是你的
box\u per\u row
这可能会起作用，但我如何将它集成到我当前的代码？我想说试试看。根据你问题中的代码，JSFIDLE中的for循环将是for循环所在的位置，JSFIDLE中的
var limit
将是你的
div\u limit
。此外，
max\u per\u row
是你的
box\u per\u row
这很有用，但不完全是我要找的。我会预先假设嵌套div占据容器的整个区域。例如，如果用户只需要一个div，那么一个div将填充容器的100%。我可以这样做吗？这很有用，但不是我想要的。我更希望嵌套div占据容器的整个区域。例如，如果用户只需要一分一秒，一分一秒就能填满整个容器。我能做到吗？
/*=================
General
=================*/

body {
    background: aqua;
}

/*=================
Sketchpad Holder
=================*/
.container {
    width: 500px;
    height: 400px;
    background-color: orange;
    overflow: hidden;
    margin: auto;
    position: relative;
    top: 20px;
}

.box {
    width: 16px;
    height: 16px;
    background: yellow;
    display: inline-block;
    margin: 1px 1px 1px 1px;
    left: 0.5%;
    right: auto;
    position: relative;
}


.clear {
    position: relative;
    margin: auto;
    text-align: center;
}

var default_grid_num = 435;
var div_limit = prompt("How large would you like your grid to be?");
var button_prompt = "Would you like to redraw the grids?";
/*var div_limit = prompt("number")*/
$(document).ready(function() {

for(var i = 1; i <= div_limit; i++)
    $(".container").append("<div class='box'></div>");

$(".container > div").hover(function() {
    $(this).css("background-color", "red");
});

$("button").click(function() {
    $(".box").fadeOut();
    if(confirm("Would you like to redraw the grid?")); 
    {
        boxes_per_row = prompt("Define width of grid.");
    }
});


});