Javascript 让div填充包含div的div？

我一直在这个网站上寻找答案，但似乎没有任何帮助。我试图让默认的（最终是用户指定的）div数像网格一样填充包含的div。我试图弄清楚如何使附加到父级的框的大小根据添加的数量而变化，同时始终填充div，如果这样做有意义的话。例如，如果我指定9，我应该有3行3列。如果我指定62，那么我将查找16行16列，总是填充（或接近）包含的div。以下是我到目前为止的一个JSFIDLE：下面是代码：

    var d = ("<div class='square'></div>");

function createGrid(numSquares){
    for(var i = 0; i < numSquares; i++){
            $('#g_area').append(d);
    }

    var squareSize = Math.floor(580/numSquares );
    $('.square').height(squareSize);
    $('.square').width(squareSize);
};


$(document).ready(function(){
    createGrid(64);

});

vard=（“”）；
函数createGrid（numSquares）{
对于（变量i=0；i

我会为此创建一个小jqueryplugin。您可以在您喜欢的每个容器中调用它：

containerForGrid.createGrid（cols，rows）

（函数（$）{
$.fn.createGrid=函数（列、行）{
//获取容器的宽度和高度
var w=this.width（）
var h=this.height（）
//计算一个单元格的宽度和高度
var colWidth=w/cols
var rowHeight=h/行
//在所有行上循环
对于（var i=行；--i；）{
//在所有的cols上循环
对于（var j=cols；--j；）{
$（''）.css({
宽度：colWidth，
高度：行高，
浮动：'左'
}).附于（本）
}
}
}
})（jQuery）
jQuery（'div'）.createGrid（10,10）

---

您遇到的唯一问题是将正方形大小设置为高度的1/64，而不是高度的1/（64^.5）。基本上你只需要排一行

vard=（“”）；
函数createGrid（numSquares）{
var gridContainer=$（“#g#u区域”）；
对于（变量i=0；i

64是32x32的例子并不意味着有意义，你是说32x2吗？你能说清楚编码问题到底是什么吗？对不起，我的数学太差了。64将是一个16x16的网格。在我的JSFIDLE中，一行有64列，这是我不想要的。有没有理由不使用lib呢？例如，Masonery就是这样的，它可以减少您的自定义代码量。这是我将来一定会考虑的，谢谢！另外，您也可以用另一种方法指定网格大小，而不是总的正方形，以获得更好的性能。（即）有没有办法让它不从包含div中流出？我得提高我的声誉，这是我在这里的第一个问题。只要我有能力，我就会。：）

var d = ("<div class='square'></div>");


function createGrid(numSquares){
    var gridContainer = $('#g_area'); 
    for(var i = 0; i < numSquares; i++){
            gridContainer.append(d);
    }

    var squareSize = Math.floor(580/(Math.sqrt(numSquares)) );
    $('.square').height(squareSize);
    $('.square').width(squareSize);
};


$(document).ready(function(){
    createGrid(64);

});