我有一个16x16的div网格，960是它们所在区域的高度和宽度，div通常是56px*56px的块，我想使div的大小能够响应网格大小的变化。
$('button').click(function(){
$('.unit').remove();
var rows=prompt("How many rows do you want?");
var columns=prompt("How many columns do you want?");
for(var x = 0; x < rows; x++) {
for(var y = 0; y < columns; y++) {
var unit = $("<div class='unit'></div>");
unit.appendTo('#container');
}
}
$('.unit').css({
width:function(){
return (960/columns);
},
height:function(){
return (960/rows);
}
});
1条答案
按热度按时间b4lqfgs41#
响应性方格，根据容器大小确定尺寸
css
grid显示器非常适合显示div矩阵，它将响应容器大小的任何变化。我的代码段在样式为
display: grid的div容器中呈现了一个16行的网格，每行有16个正方形。使用
aspect-ratio: 1样式规则将每个正方形强制为正方形（高度和宽度相等）;通过为容器指定
grid-template-columns规则，可以将正方形排列成16行，每行具有相等的宽度（因此高度也相等）。这是通过使用分数宽度单位（fr）来实现的，它基本上会自动将可用的宽度划分为指定的分数。我使用repeat规则简洁地实现了这一点：模板也可以这样写：
repeat实现了同样的效果。无论外部容器div的宽度是多少，使用这个方法，正方形的大小都会调整到可用空间的1/16。另外，请注意，正如我的例子中所使用的，如果需要，可以在正方形div之间引入一个间隙，而不需要重新计算正方形的大小，这一切都由grid-template-rows处理。
演示：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
要将这个简单的解决方案应用到您的示例中，您只需将容器划分的大小指定为起始宽度。方块将自动调整大小。当您更改外部div大小（通过 any 方法）时，内部方块将自动调整大小并保持其16 x16排列。