我在设置我正在做的草图项目的动态部分时遇到一些困难。接下来我要实现的想法是,预定容器内的正方形 (div) 数量会发生变化,并且盒子会更改大小以始终填充容器。会发生的情况是,如果盒子数量超过 256 个,它们就会溢出到底部,如果不够,它们就不会填满容器的额外空间。
codepen 链接 - https://codepen.io/kcolrehs/pen/eYKZXoa
CSS
*,
*:before,
*:after {
box-sizing: border-box;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
width: 250px;
height: 250px;
}
.grid {
border: 0.1px solid black;
width: 15.63px;
height: 15.63px;
}
Javascript:
for (let i = 0; i < 256; i++) {
const grid = document.createElement('div');
grid.classList.add('grid');
container.appendChild(grid);
}
问题是:如何设计盒子的样式,使其根据父容器内的数量自动更改大小?
例如:
我尝试过使用各种弯曲增长和收缩属性,但除了使正方形变形之外,它没有真正做任何事情。
我尝试过不使用方形 div 的预定高度和宽度,而是使用 margint top 和匹配宽度,但效果不佳。
现在我正在考虑切换到网格布局并重新工作我的java以生成列和水平正方形并制作这样的网格,但在我这样做之前我在想也许有一个我没有想到的解决方案在这里。
感谢@Rory McCrossan 让我走上了正确的方向:
slider.addEventListener('change', function () {
let boxes = document.querySelectorAll('.grid');
boxes.forEach(box => {
box.remove();//removes old grid
});
createGrid() //makes new grid afte reset
})
function createGrid() {
for (let i = 0; i < (slider.value * slider.value); i++) {
const grid = document.createElement('div');
let a = slider.value;
const boxSize = 250 / a; // creates the dynamic squeres
grid.classList.add('grid');
grid.style.width = boxSize + 'px';
grid.style.height = boxSize + 'px';
container.appendChild(grid);
}
}
我会发布此内容,以防有一天同一个人遇到类似的问题