Question

我有固定的宽度方形div维度说320X320（因为我希望它也适用于移动设备）。我的标准就像在第一阶段它将是一个正方形和第二阶段它将被分成相等的4个正方形，如320X320的网格，4个部分，第三个阶段，9个正方形网格，最后在第四个阶段，12个方格。

这个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

我走了这么远，但除了这个我想得到很好的建议，因为我不喜欢这些像素的分数。我在数学方面不是那么好:)所以请原谅上面的计算是错误的。

感谢任何帮助/建议。

Answer 1

你可以使用这样的东西吗？

<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

希望这有帮助！

使用CSS的固定宽度Div的动态单元创建问题

1 个答案: