Question

我正在制作一个方格div的网格，从16x16开始。但是，通过单击页面上的按钮并填写提示，可以将此网格调整为更大或更小（40x40,10x10,60x60等）。

当用户调整网格大小时，我希望新网格占用与原始16x16网格占用的空间相同的空间。我正在使用＆＃39; vw＆＃39;调整div的宽度，这似乎正常工作（它们动态响应以适应网格的原始大小）。但是，当我使用＆＃39; vh＆＃39;时，每个div的高度似乎都没有正确响应。并且div扩展到容器div之外。

这是HTML：

<! DOCTYPE html>
<html>

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="grid.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="grid.css">
    <title>The Grid</title>
</head>

<body>

    <button type="button">Click Me!</button>

    <div class="grid">

    </div>


</body>


</html>

这里是CSS：

body {
background: #000;
}

.square {
background-color: white;
display: table-cell;
border: 1px solid black;
width: 100vw;
height: 7.75vh;
}

.highlighted {
background-color: #0000FF;
}

以下是JavaScript：

$(document).ready(function () {
var $grid = $('.grid');
for (var i = 0; i < 16; i++) {

    var row = '<div>';

    for (var j = 0; j < 16; j++)
        row += '<div class = "square"></div>';

    row += '</div>';

    $grid.append(row);

}


$('button').on('click', function () {
    $('.square').detach();
    var gridPrompt = prompt('How many squares per side would you like to make the current grid?');

    var $grid = $('.grid');
    for (var i = 0; i < gridPrompt; i++) {

    var row = '<div>';

    for (var j = 0; j < gridPrompt; j++)
        row += '<div class = "square"></div>';

    row += '</div>';

    $grid.append(row);
    console.log(gridPrompt);
}

var newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
$('.square').on('mouseenter', function () {
    $(this).css({'background-color': newColor});

});

});

var newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
$('.square').on('mouseenter', function () {
    $(this).css({'background-color': newColor});

});

});

Here's the JSFiddle

Answer 1

正方形正确响应，因为它们显示为表格单元格，而不是因为您已明确将宽度设置为100vw。如果这些显示为块样式元素，那么100vw将意味着单个块将跨越整个视口。

我认为更好的方法是将方块显示为内联块元素，并根据用户的输入计算显式宽度和高度。

编辑：这是您在评论http://jsfiddle.net/2xh2maya/2/

之后更改了我的更改

Answer 2

这可以使用flex实现。但是，flex存在一些兼容性问题。查看here以获取更多信息。所以，这是我的解决方案：

＆＃13;

function LoadBlocks(){ 
  var grid = document.getElementById('container'),
      size = prompt('How many squares per side would you like to make the current grid?'),
      newColor = ('#'+Math.floor(Math.random()*16777215).toString(16));
  while (grid.hasChildNodes()){grid.removeChild(grid.lastChild);}
  for (y=0;y<size;y++){
    var row = document.createElement('div');
    row.className = "row";
    for (x=0;x<size;x++){
      var block = document.createElement('div');
      block.className = "object";
      row.appendChild(block);
    }
    grid.appendChild(row);
  }
  $("div.object").hover(function(){$(this).css("background-color", newColor);});
}

＆＃13;

#container{
  width:500px;
  height:500px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction: column;
}
.row{
  flex:1;
  display:flex;
}
.object{
  flex:1;
  background-color: wheat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<input type="button" onclick="LoadBlocks()" value="Generate"/>

＆＃13;

附注：您可能希望为用户可以输入的大小添加上限。我刚试了600，那太迟了。

根据div的数量动态调整div高度

2 个答案: