如何使 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?
问题描述
Introduction
介绍
I am currently learning web development and I am trying to make some sort of etch-a-sketch thing and it should pop out a grid with up to 100 square cells per side BUT no matter what number of cells per side the grid itself should be using the same amount of space, so for example if the total space it could use was 1000px then the grid, no matter how many cells it has, will use 1000px, no more or no less.我目前正在学习 web 开发，我正在尝试制作某种蚀刻草图的东西，它应该弹出一个每边最多 100 个方形单元格的网格，但无论网格本身每边有多少个单元格使用相同数量的空间，例如，如果它可以使用的总空间是 1000 像素，那么网格，无论它有多少单元格，都将使用 1000 像素，不多也不少。 My problem is that I'm not sure what I should do to make the grid do this.我的问题是我不确定我应该怎么做才能让网格做到这一点。
Problem context问题上下文
For starters, for my purposes I can only generate the grid itself via Javascript.对于初学者，出于我的目的，我只能通过 Javascript 生成网格本身。 In the Javascript I use a doubly-nested for loop where after each iteration in the first loop, a new "grid-row" div will be created and then the second for loop will populate that grid row with "square" divs, so if I set the number as 5 per-side, it will create a grid-row and populate that row with 5 square divs 5 times.在 Javascript 中，我使用双重嵌套的 for 循环，在第一个循环中的每次迭代之后，将创建一个新的“grid-row”div，然后第二个 for 循环将使用“square”div 填充该网格行，所以如果我将数字设置为每边 5，它将创建一个网格行并用 5 个方形 div 填充该行 5 次。
My problem我的问题
The whole grid itself is wrapped in a "grid-container" div with a fixed size.整个网格本身被包裹在一个具有固定大小的“网格容器”div 中。 I would like to make it so the grid will always fill up the size of the grid container but not exceed the container itself.我想这样做，以便网格始终填满网格容器的大小，但不超过容器本身。 In other words, I would like to find a way to make the square and/or grid-row divs be able to shrink or grow depending on the number of them inside the grid-container so as to not have the overall grid exceed the size of the grid-container itself but still fill up the available space in the container.换句话说，我想找到一种方法使正方形和/或网格行 div 能够根据网格容器内的数量缩小或增长，以免整个网格超过大小网格容器本身，但仍会填满容器中的可用空间。
So far I have played around with various CSS properties suggestions that I found from Google searches such as setting height and width of either the "square" or "grid-row" divs (or both of them at the same time) to 100%, playing around with the max widths and heights, as well as their mins, and playing around with the "overflow" and object-fit properties.到目前为止，我已经玩过各种 CSS 属性建议，这些建议是我从 Google 搜索中找到的，例如将“正方形”或“网格行”div（或同时设置两者）的高度和宽度设置为 100%，玩弄最大宽度和高度，以及它们的最小值，玩弄“溢出”和对象适合属性。 I'm not sure if there was a solution for my problem in Javascript and if there was I haven't found one in my myriad Google searches.我不确定在 Javascript 中是否有解决我的问题的方法，如果我在无数的 Google 搜索中没有找到解决方法。
Here's my code snippet, I'd appreciate any help:这是我的代码片段，我将不胜感激：
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
I grabbed the width of the grid-container, then divided that by the number of columns to get the width/height of each cell.我抓住了网格容器的宽度，然后将其除以列数以获得每个单元格的宽度/高度。
Then I used javascript to set the width and height to that size.然后我使用 javascript 将宽度和高度设置为该大小。
I got rid of the grid-row CSS.我摆脱了网格行 CSS。 Also, you don't need to loop through the cells to add hover class.此外，您无需遍历单元格即可添加 hover class。 Just use .square:hover in CSS and it will automatically apply it to the matching cells.只需在 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.