Question

我正在从The Odin Project开展一个项目。基本上是this。

以下是代码：

HTML

<!DOCTYPE html>

<html>

<head>
    <script src="js/jQuery.js"></script>
    <link type="text/css" rel="stylesheet" href="css/sketch.css">
    <script src="js/sketch.js"></script>
</head>

<body>
<div class="grid_controls">
    <button class="clear">Clear</button>
</div>
<div class="container">
</div>
</body>

</html>

CSS

/*=================
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;
}

使用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.");
    }
});


});

我想要做的是获取用户输入（.div_limit）并根据用户输入（.box）调整div（.div_limit）的大小。所以如果用户只输入了第一，一个div将占据整个容器盒。

以下是我目前的情况：http://codepen.io/zappdapper/full/epdPKb/

我知道我可以做到这一点，但是怎么做？

Answer 1

我创建了jsfiddle使用mod运算符%和一些数学来确定框的百分比。

我还包括max_per_row以确定连续显示的数量。

Answer 2

<强>更新

我再看看你的例子和评论，然后想出来：

http://jsfiddle.net/xw4cbo5n/

我稍微编辑了这个例子，所以不是问两个问题，而是只问一个问题：＆＃34;每行网格有多少个框＆＃34; （这与你的例子类似）。

然后继续绘制一个网格，其中每行包含该数字并相应地设置每个弓的宽度和高度。我还略微编辑了你的CSS样式。

这更接近你正在寻找的东西吗？

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

1）你想要几箱？

2）一行应占多少箱？

http://jsfiddle.net/5vg6n232/

在给出响应后，绘制网格。

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

function drawBoxes(){

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

function restyle(numberofBoxesPerRow){

根据用户指定的每行框数，简单地重置每个框的CSS宽度。

这会回答你的问题吗？

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

2 个答案: