创建一个10x10的单元格字段

Question

我想创建一个单元格字段。 该字段的大小为10x10。 当达到一行的最大单元数时，它应该开始新的一行。

目前，我所有的单元格div都位于下面。

 function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }

 .cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>

Answer 1

使用display:inline-block; 对于.cell并要在每行停止10个位置，请在每行10个div后添加<br>标记。

 function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); } $(document.body).append("<br>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }

 .cell { height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>

Answer 2

每10个单元格创建一个包装器。

 function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { $(document.body).append("<div>"); for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } $(document.body).append("</div>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }

 .cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>

Answer 3

您可以使用绝对定位并为每个css属性设置。 这是小提琴

 function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css cellDiv.css({ left: Math.floor(x*50), top: Math.floor(y*50) }); $(document.body).append(cellDiv); // add the cell div to the parent } initGame()

 .cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; position: absolute; }

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

Answer 4

你可以创建一个行div包含多个单元div

 function initGame() { const rows = 10; const columns = 10; for(let r=0;r<rows;r++){ let row = createRow(r); for(let c=0;c<columns;c++){ createCell(row, r, c); } } } function createRow(rowNumber){ let row = document.createElement('DIV'); row.className += ' row' $(document.body).append(row); return row; } function createCell(domRow, rowNumber, columnNumber){ let column = document.createElement('DIV'); column.className += ' cell'; $(domRow).append(column); }

 .cell{ height: 50px; width: 50px; border: 1px solid grey; background: tomato; display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>

创建一个10x10的单元格字段

问题描述

4 个解决方案

解决方案1
1 2017-07-20 07:40:19

解决方案2
1 已采纳 2017-07-20 07:47:43

解决方案3
0 2017-07-20 07:46:51

解决方案4
0 2017-07-20 07:49:58

创建一个10x10的单元格字段

问题描述

4 个解决方案

解决方案1 1 2017-07-20 07:40:19

解决方案2 1 已采纳 2017-07-20 07:47:43

解决方案3 0 2017-07-20 07:46:51

解决方案4 0 2017-07-20 07:49:58

解决方案1
1 2017-07-20 07:40:19

解决方案2
1 已采纳 2017-07-20 07:47:43

解决方案3
0 2017-07-20 07:46:51

解决方案4
0 2017-07-20 07:49:58