使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

我会为此创建一个小jqueryplugin。 您可以在每个喜欢的containerForGrid.createGrid(cols, rows)调用它： containerForGrid.createGrid(cols, rows)

 (function($){ $.fn.createGrid = function(cols, rows) { // get width and height of sorrounding container var w = this.width() var h = this.height() // calculate width and height of one cell var colWidth = w / cols var rowHeight = h / rows // loop over all rows for(var i = rows; --i;){ // loop over all cols for(var j = cols; --j;){ $('<div>').css({ width:colWidth, height:rowHeight, float:'left' }).appendTo(this) } } } })(jQuery) jQuery('div').createGrid(10,10) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:1000px;height:500px"> </div> 

Answer 2

您遇到的唯一问题是将正方形大小设置为高度的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);

});