如何创建一个网格，其中可变数量的正方形会自动调整大小以适应空间

How create a grid in which a variable number of squares automatically resize to fit a space?

本文关键字：正方形 调整 空间 创建 何创建 一个 网格      更新时间：2023-09-26

我正在解决这个问题：http://www.theodinproject.com/web-development-101/javascript-and-jquery?ref=lnav。

基本上，我需要创建一个游戏，其中用户单击一个按钮，询问他们想要在网格中有多少个方块，然后网格出现，他们可以通过将鼠标悬停在改变颜色的方块上在网格上绘制。到目前为止，我想出了一切，除了如何自动调整正方形的大小以占据它们所在的div 容器的全部空间（我将 16x16 网格的形状限制为正方形，方法是将其放置在具有设置高度和宽度的 id 容器的div 中）。我尝试使用 css，将高度和宽度更改为 100%。但是，当我这样做时，它们只是出现在列中而不是网格中。

如果你在jsfiddle中打开它，并请求每边16个正方形的网格，你会看到我想要发生的事情。 每边 16 个正方形是最大值，我希望任何较少数量的正方形来填充该空间并保持正方形网格格式，而不是形成一列。我不确定该解决方案是否涉及CSS或jQuery。感谢您的任何帮助！

这是 html：

<body>
<div id ="button">
  <p>Play the game</p>
</div>
<div id ="container"></div>
</div>  
</body>

这是 CSS：

.squares {
  background-color: #c266ff;
  display: block;
  height: 100%;
  width: 100%;
  display: inline-block;
  margin-left: 3px;
}
#container {
  height: 200px;
  width: 470px;
  margin: auto;
  margin-top: 50px;
}
#button {
  height: 50px;
  width: 100px;
  background-color: #ddcee6;
  border: 2px solid #ddcee6;
  border-radius: 10px;
  text-align: center;
  color: #19171a;
  margin: auto;
  margin-top: 50px;
}

下面是 jquery/javascript：

$(document).ready(function() {
  $("#button").click(function() {
    var x = prompt("How many squares do you want on each side of the grid? Pick between 1 and 16.");
    for(var i = 0; i < (x*x); i++) {   
      $("<div class='squares'></div>").appendTo("#container");
    }
    $(".squares").one("mouseover", function() {
      $(this).css("background-color","#6b00b3");
    });
  });
});

这里有一种方法可以计算高度和宽度，并使用jQuery应用它。

//Calculate squares height and width
var containerHeight = $('#container').innerHeight();
var containerWidth = $('#container').innerWidth();
var squareMargins = ($('.squares').outerWidth(true) - $('.squares').outerWidth()) * x;  //Margin * x to take margin space into account, otherwise calculation will be off
var squareHeight = (containerHeight - squareMargins) / x;
var squareWidth = (containerWidth - squareMargins) / x;
$('.squares').height(squareHeight);
$('.squares').width(squareWidth);

在这里演示

这是一个开始。

$(document).ready(function() {
  $("#button").click(function() {
    var x = prompt("How many squares do you want on each side of the grid? Pick between 1 and 16.");
    var s = (100 / x);
    for(var i = 0; i < (x*x); i++) {
      $("<div class='squares' style='width:" + s + "%; height:" + s + "%'></div>").appendTo("#container");
    }
    $(".squares").one("mouseover", function() {
      $(this).css("background-color","#6b00b3");
    });
    console.log(document.body.innerHTML);
  });
});
.squares {
  background-color: #c266ff;
  float: left;
  border: 1px solid black;
  box-sizing: border-box;
}
#container {
  height: 200px;
  width: 470px;
  margin: auto;
  margin-top: 50px;
}
#button {
  height: 50px;
  width: 100px;
  background-color: #ddcee6;
  border: 2px solid #ddcee6;
  border-radius: 10px;
  text-align: center;
  color: #19171a;
  margin: auto;
  margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="button">
  <p>Play the game</p>
</div>
<div id ="container">
</div>

相关文章：