使用CSS的固定寬度Div的動態單元格創建問題

我有固定寬度的平方尺寸，例如320X320（因爲我希望它也可以在移動設備中工作）。我的標準就像第一階段將是一個平方，第二階段將分成相等的4個方格，如320X320的網格，4個部分，第三個9方格，最後是第四個方格，12個方格。使用CSS的固定寬度Div的動態單元格創建問題

這個320X320可以是可變的我唯一的標準就像它應該在移動兼容。

我將使用jQuery根據這些計算基於每個階段繪製方框。

Stage 1: 320X320 [1 square] 
Stage 2: 160.66X160.66 [4 squares] => 2 rows 2 columns 
Stage 3: ?? [9 squares] => 3 rows 3 columns 
Stage 4: ?? [12 squares] =>4 rows 3 columns

我走這麼遠，但我想從這個除了獲得好的建議，因爲我不喜歡在像素這些分數。我在數學方面不太好:)所以請原諒，如果上述計算錯誤。

任何幫助/建議表示讚賞。

來源

2016-04-28 Wolverine

你也許可以用這樣的東西？

<style> 
 
    #container { 
 
     display: table; 
 
     height: 320px; 
 
     width: 320px; 
 
    } 
 
    .row { 
 
     display: table-row; 
 
    } 
 
    .square { 
 
     border: 1px solid #00F; 
 
     display: table-cell; 
 
    } 
 
</style> 
 

 
<div id="container"></div> 
 

 
<button onclick="makeSquares(1, 1)">one</button> 
 
<button onclick="makeSquares(2, 2)">four</button> 
 
<button onclick="makeSquares(3, 3)">nine</button> 
 
<button onclick="makeSquares(4, 3)">twelve</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 
    function makeSquares(rows, columns) { 
 
    var container = $('#container'); 
 
    container.find('.row').remove(); 
 
    for (var row = 0; row < rows; row++) { 
 
     var relement = $('<div class="row"></div>').appendTo(container); 
 
     for (var column = 0; column < columns; column++) { 
 
     relement.append('<div class="square">test</div>'); 
 
     } 
 
    } 
 
    } 
 
</script>

我把它作爲一個練習OP理解什麼是怎麼回事... :-P

希望這有助於！

來源

2016-04-28 15:43:16 CaffeineFueled

使用CSS的固定寬度Div的動態單元格創建問題

回答

相關問題