如何使 div 動態填充固定大小的容器並根據容器中 div 的數量縮小和/或擴展？
[英]How can I make divs dynamically fill up fixed-size container and shrink and/or expand depending on number of divs in the container?
問題描述
介紹
我目前正在學習 web 開發，我正在嘗試制作某種蝕刻草圖的東西，它應該彈出一個每邊最多 100 個方形單元格的網格，但無論網格本身每邊有多少個單元格使用相同數量的空間，例如，如果它可以使用的總空間是 1000 像素，那么網格，無論它有多少單元格，都將使用 1000 像素，不多也不少。 我的問題是我不確定我應該怎么做才能讓網格做到這一點。
問題上下文
對於初學者，出於我的目的，我只能通過 Javascript 生成網格本身。 在 Javascript 中，我使用雙重嵌套的 for 循環，在第一個循環中的每次迭代之后，將創建一個新的“grid-row”div，然后第二個 for 循環將使用“square”div 填充該網格行，所以如果我將數字設置為每邊 5，它將創建一個網格行並用 5 個方形 div 填充該行 5 次。
我的問題
整個網格本身被包裹在一個具有固定大小的“網格容器”div 中。 我想這樣做，以便網格始終填滿網格容器的大小，但不超過容器本身。 換句話說，我想找到一種方法使正方形和/或網格行 div 能夠根據網格容器內的數量縮小或增長，以免整個網格超過大小網格容器本身，但仍會填滿容器中的可用空間。
到目前為止，我已經玩過各種 CSS 屬性建議，這些建議是我從 Google 搜索中找到的，例如將“正方形”或“網格行”div（或同時設置兩者）的高度和寬度設置為 100%，玩弄最大寬度和高度，以及它們的最小值，玩弄“溢出”和對象適合屬性。 我不確定在 Javascript 中是否有解決我的問題的方法，如果我在無數的 Google 搜索中沒有找到解決方法。
這是我的代碼片段，我將不勝感激：
const container = document.querySelector(".grid-container"); for (let x = 0; x < 6; x++) { /* Both the "x" and "y" variables are set to arbitrary values (up to 100). The "x" variable here represents how many total "rows" the grid will create. The following "y" variable represents how many square divs will populate each row, so both of these numbers should be the same to make a square grid.*/ let newRow = document.createElement('div'); newRow.classList = `grid-row`; container.appendChild(newRow); for (let y = 0; y < 6; y++) { let square = document.createElement('div'); square.classList = `square`; newRow.appendChild(square); } } const gridCells = document.querySelectorAll(".square"); gridCells.forEach(cell => { cell.addEventListener("mouseover", () => { cell.classList.add("hov-square"); }); });
/*This is the current state of the CSS file that I left on prior to posting this question. I set the width and height of the "square" divs to 10px each to make the grid visible and to give an idea of what the grid may look like, but my goal is for the grid (the grid-rows and the square divs inside of it) to be able to fill up the "grid-container" div that wraps the grid itself and resize itself depending on how many square cells are in the grid but never exceed the size of the grid-container itself.*/ body { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background-color: black; }.grid-container { margin-top: 10%; display: flex; width: 750px; height: 750px; justify-content: center; align-items: center; overflow: visible; }.grid-row { max-width: 100%; max-height: 100%; }.square { width: 10px; height: 10px; border: 1px dashed white; }.hov-square { background-color: grey; }
<,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"> <script src="script.js" defer></script> <link rel="stylesheet" href="styles.css"> <title>Etch-a-Sketch</title> </head> <body> <div class="grid-container"></div> </body> </html>
1 個解決方案
解決方案1
0 2022-08-03 19:25:54
我抓住了網格容器的寬度，然后將其除以列數以獲得每個單元格的寬度/高度。
然后我使用 javascript 將寬度和高度設置為該大小。
我擺脫了網格行 CSS。 此外，您無需遍歷單元格即可添加 hover class。 只需在 CSS 中使用.square:hover ，它就會自動將其應用於匹配的單元格。
const container = document.querySelector(".grid-container"); let squares = 100; let _parent_width = getComputedStyle(container).width; let sq_size = Math.floor(_parent_width.replace("px","") / squares) - 2; for (let x = 0; x < squares; x++) { let newRow = document.createElement('div'); newRow.classList = `grid-row`; container.appendChild(newRow); for (let y = 0; y < squares; y++) { let square = document.createElement('div'); square.classList.add("square"); square.style.width = sq_size + "px"; square.style.height = sq_size + "px"; newRow.appendChild(square); } } const gridCells = document.querySelectorAll(".square"); gridCells.forEach(cell => { cell.addEventListener("mouseover", () => { cell.classList.add("hov-square"); }); });
/*This is the current state of the CSS file that I left on prior to posting this question. I set the width and height of the "square" divs to 10px each to make the grid visible and to give an idea of what the grid may look like, but my goal is for the grid (the grid-rows and the square divs inside of it) to be able to fill up the "grid-container" div that wraps the grid itself and resize itself depending on how many square cells are in the grid but never exceed the size of the grid-container itself.*/ body { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background-color: black; }.grid-container { display: flex; width: 1000px; height: 1000px; justify-content: center; align-items: center; overflow: visible; }.square { border: 1px dashed white; }.hov-square{ background-color: grey; }
<div class="grid-container">c</div>
如何動態調整div網格的大小以填充（但不超過）容器div的尺寸？
[英]How can I dynamically resize a grid of divs to fill (but not exceed) the dimensions of a container div?
如何使 div 縮小以適應容器保持其相對寬度？
[英]How to make divs shrink to fit container maintaining their relative widths?
如何在容器中放置兩個div，以便在調整另一個div的大小時自動調整其大小以填充容器？
[英]How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?
動態添加DIV，但保持容器的寬度和高度固定
[英]Adding DIVs dynamically but keeping the container with fixed width and height
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.