如何修復css中網格使用的像素總量？

Question

如果這是一個重復的問題，我很抱歉，我需要一些幫助，因為我是菜鳥。 我創建了一個網格。 但是每次我輸入不同的數字時，它都會使用不同的像素總量。 無論網格的數量是多少，我都希望包含網格的主體的高度和寬度保持完全相同的大小。

https://moonsol124.github.io/ETCH-A-SKETCH-TOP-PROJECT-/

這是我做的。

爪哇：

function createGrid(maxGrid = 16) {
    for (let i = 0; i < maxGrid; i++) {
        const divRow = document.createElement('div');
        divRow.classList.add('div-row');
        for (let j = 0; j < maxGrid; j++) {
            const div = document.createElement('div');
            div.classList.add('div-style');
            divRow.appendChild(div);
        }
        body.appendChild(divRow);
    }
addColorOnGrid();

}

CSS：

.div-row {
    display: flex;
    flex-direction: column;
}

.div-style {
    width: 25px;
    height: 25px;
    flex: 1 1 auto;
    background-color: RGB(0, 0, 0);
    border: solid 3px RGB(255, 255, 255);
}

html:

   <body>
        <div class="btn-group">
            <button class="btn" id="grid-button">Enter number of grid</button>
            <button class="btn" id="reset-button">Reset</button>
        </div>
        <div class="grid-body">

        </div>
    </body>

請告訴我我的方法是否錯誤。 謝謝你的幫助。

Answer 1

我認為這將幫助您解決您的問題我只是添加這些部分

divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);

它訪問父元素並在該元素內創建 div

你可以在這里傳遞任何數字來測試onLoad="createGrid(6)"

 function createGrid(maxGrid) { for (let i = 0; i < maxGrid; i++) { const divRow = document.createElement("div"); divRow.classList.add('div-row'); for (let j = 0; j < maxGrid; j++) { const div = document.createElement('div'); div.classList.add('div-style'); divRow.appendChild(div); } divRow.appendChild(document.createElement("div")); document.getElementById('ac').appendChild(divRow); } } function popup() { let val = prompt("Please enter value here"); const div = document.getElementsByClassName("div-style"); for(i = 0; div.length > 0; i++){ div[0].remove() } this.createGrid(parseInt(val)); }

 .grid-body { display: flex; flex-direction: row; } .div-style { width: 25px; height: 25px; flex: 1 1 auto; background-color: RGB(0, 0, 0); border: solid 3px RGB(255, 255, 255); }

 <body onLoad="createGrid(6)"> <div class="btn-group"> <button class="btn" id="grid-button" onClick="popup()">Enter number of grid</button> <button class="btn" id="reset-button">Reset</button> </div> <div class="grid-body" id="ac"> </div> </body>

如何修復css中網格使用的像素總量？

問題描述

1 個解決方案

解決方案1
1 已采納 2022-06-01 19:40:35

如何修復css中網格使用的像素總量？

問題描述

1 個解決方案

解決方案1 1 已采納 2022-06-01 19:40:35

解決方案1
1 已采納 2022-06-01 19:40:35