css 有没有一种方法可以使许多子div保持在父div的大小内而不溢出？

fae0ux8s 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(118)

我正在做一个来自odin项目的Etch-a-sketch项目，到目前为止，我已经能够制作网格并应用悬停效果。我一直在努力使子div适合父div。我正在考虑一种方法来调整子div的大小，但无法找到它。我还认为将父div（容器）和子div的大小设置为固定数字给我带来了问题。
任何帮助是赞赏！

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="script.js" defer></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-A-Sketch</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>

个字符

css

来源：https://stackoverflow.com/questions/77761862/is-there-a-way-to-make-many-child-divs-stay-within-the-parents-div-size-without

1条答案

按热度按时间

ndasle7k1#

创建所需网格的一个简单解决方案可以是向DOM添加 rowdiv，并在移动到下一个 rowdiv之前向该div追加squaresPerSide数量的正方形。还会有squaresPerSide数量的行（创建squaresPerSide * squaresPerSide框）。
下面是更好地解释这一点的代码：

for (i = 0; i < squaresPerSide; i++) {
  const row = container.appendChild(document.createElement('div'));
  for (j = 0; j < squaresPerSide; j++) {
    let square = container.appendChild(document.createElement('div'));
    square.setAttribute('style', 'background-color: black; width: 10px; height: 10px; margin: 1px');
    square.addEventListener("mouseover", function() {
      square.style.backgroundColor = "red"
    })
    row.appendChild(square);
  }
}

字符串
这里有一个小提琴玩：https://jsfiddle.net/s8zL9fq5/

赞(0）回复(0）举报 2024-01-09

我来回答

css 有没有一种方法可以使许多子div保持在父div的大小内而不溢出？

1条答案

相关问题

热门标签

最新问答