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

}); 

Answer 2

我將創造一個小jqueryplugin。你可以把它在每一個容器，你喜歡：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>