javascript - 让 div 填满一个包含的 div？

Question

我一直在网站上搜索答案，但似乎没有任何帮助。我试图做到这一点，以便默认(最终用户指定)数量的 div 像网格一样填充包含的 div。我试图弄清楚如何根据添加的数量改变我附加到父项的框的大小，同时始终填充 div，如果这有意义的话。因此，例如，如果我指定 9，我应该有 3 行和 3 列。如果我指定 62，那么我正在寻找 16 行和 16 列，总是填满(或接近，无论如何)包含的 div。这是我目前拥有的一个 JSfiddle:https://jsfiddle.net/psyonix/1g9p59bx/1/这是代码:

    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);

});

Answer 1

您遇到的唯一问题是将正方形大小设置为高度的 1/64，而不是高度的 1/(64^.5)。基本上你只是排成一排。 https://jsfiddle.net/1g9p59bx/7/

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);

});