是否可以根据容器内的 div 数量重新排列容器内的 div？答案

【问题标题】：Is it possible to rearrange the divs inside a container according to number of divs inside?是否可以根据容器内的 div 数量重新排列容器内的 div？
【发布时间】：2022-10-05 07:57:18
【问题描述】：

我是 html 和 css 的新手。我想创建一个函数，给定一个介于 1 到 9 之间的数字 k，容器 div 内将显示 k 个 div。然而，块的排列随着k的不同而变化。例如，对于 k=4，排列将是 2x2，而对于 k=6，排列将是 3x2。所有的安排都可以在下图中看到。有什么办法可以根据div的数量调整排列吗？我想我应该为 css 使用 flexbox，但不知何故我找不到容器的正确配置。

【问题讨论】：

您可以在 flex-box w3schools.com/cssref/css3_pr_order.asp 中使用 order
您可以使用 Javascript 来实现。
你可以使用 flexbox，看看@css-tricks.com/snippets/css/a-guide-to-flexbox
@UmairFarooq 我想做的不是安排街区的“顺序”，而是安排大小和位置。我想调整块的大小，以便根据总块数连续排列 2 或 3 个块。所以我猜你评论的链接不是这样吗？
请在 sn-p 中分享您的代码。

标签： javascript html css

【解决方案1】：

这是一个使用 display: grid; 和 :has() CSS 伪类的纯 CSS 解决方案。使用:has()，我们可以根据子元素的数量将样式应用于元素：

#container:has(div:nth-child(3)) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

上述样式仅适用于 id="container" 的元素，仅当它包含至少 3 个子元素时。

JS Fiddle

（JavaScript 仅用于将 div 添加到容器中以进行演示）

资料来源：

文章解释如何根据子元素数量设置元素样式：https://www.matuzo.at/blog/2022/counting-children/

:has() CSS 伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:has

【讨论】：

【解决方案2】：

HTML:使用提交和重置Buttons 为K 值创建Input，创建div 容器.wrapper。

CSS:给我的容器 400x400 大小。声明一个:root 变量--width:50%;，用于设置将通过JS 生成的单个框的宽度。

JS:在submit 按钮上添加EventListener。我要做的第一件事是获取输入（K）的值。设置一个 if 条件来检查用户是否已经生成了任何 divs，如果有，我用 innerHTML = "" 删除包装器内的所有东西

放置另一个 if 来检查数字是否大于 4，然后通过将 :root 中的变量值更改为 --width:33% 来使每个框的大小为 33% 以满足我们的 3x3 要求。

在for loop 内循环创建我们的盒子。盒子将生成(k)Times。在createBox 中添加html 并将其添加到wrapper 中。我希望你能理解。如果你有任何问题，请询问。

let wrapper = document.querySelector(".wrapper");
let btn = document.querySelector(".btn");
let resetBtn = document.querySelector(".r-btn");

btn.addEventListener("click", () => {
  let input = document.querySelector("#input").value;
  if (wrapper.innerHTML !== "") {
    wrapper.innerHTML = "";
  }
  if (input > 4) {
    document.querySelector(":root").style.setProperty("--width", "33.3%");
  } else {
    document.querySelector(":root").style.setProperty("--width", "50%");
  }
  for (let i = 0; i < input; i++) {
    let createBox = `<div class="box">${i + 1}</div>`;
    wrapper.innerHTML += createBox;
  }

  document.querySelector("#input").value = "";
});
resetBtn.addEventListener("click", () => {
  wrapper.innerHTML = "";
});

:root{
  --width:50%;
}
#input {
  width: 100px;
  margin-bottom: 10px;
}
.box {
  background-color: burlywood;
  text-align: center;
  width: var(--width);
  outline: 1px solid green;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 400px;
  outline: 1px solid red;
}

<input min="2" max="9" type="number" placeholder="Enter K Value" id="input" />
<button class="btn">Enter</button>
<button class="r-btn">Reset</button>
<div class="wrapper"></div>

【讨论】：