初學者在這里。
自從幾天以來，我嘗試構建一個帶有 32 個框、16 列和 16 行的 etch-a-sketch 板。我最終得到的唯一結果是一行或一列中的 32 個盒子。我不知道錯誤在哪里，在腳本、css 或 html 中，所以我在帖子中包含了所有三個。
任何幫助表示贊賞！
這是代碼：
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i ) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
grid.appendChild(squareCol);
}for(let j = 0; j <= 16; j ){
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id',j)
grid.appendChild(squareRow);
}
}
makeBoard();
})body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
justify-content: center;
align-items: center;
}
.squareRow, .squareCol {
display: flex;
justify-content: center;
align-items: center;
height: 10px;
width: 10px;
border: solid black 1px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>uj5u.com熱心網友回復：
您主要需要包裝網格列。查看我應用到容器和里面的專案的附加 CSS。
正如 epascarello 指出的那樣，所有 flex 子項都應該是列。該容器是行。或者你必須重構你的腳本來實際創建多個 flex 行，以及單獨的容器。
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#message');
//MAKE THE BOARD
function makeBoard() {
for (let i = 0; i <= 16; i ) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id', i)
grid.appendChild(squareCol);
}
for (let j = 0; j <= 16; j ) {
const squareRow = document.createElement('div');
squareRow.className = 'squareRow';
squareRow.setAttribute('data-id', j)
grid.appendChild(squareRow);
}
}
makeBoard();
})body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.squareRow,
.squareCol {
display: flex;
flex: 1 1 6.25%;
justify-content: center;
align-items: center;
height: 10px;
border: solid black 1px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="grid"></span>
</div>
<div id="message"></div>
</body>
</html>uj5u.com熱心網友回復：
我將一個 div (.parent) 容器放入您的包裝容器內。父類包含網格模板。
const grid = document.getElementById('c');
for (let i = 0; i < 32; i ) {
const squareCol = document.createElement('div');
squareCol.className = 'squareCol';
squareCol.setAttribute('data-id',i)
squareCol.innerHTML = (i 1)
grid.appendChild(squareCol);
}body {
margin: 0;
padding: 0;
}
.parent {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 618px;
width: 618px;
}
.squareCol {
}
.squareRow, .squareCol {
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
border: solid black 1px;
} <body>
<div class="container">
<div id="c" class="parent"></div>
</div>
<div id="message"></div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/389255.html
標籤：javascript css 弹性盒