使用JavaScript循环实现每行4张图片的布局问题求助

需要实现一个图片选择页面，通过JavaScript循环生成HTML结构，目标布局为两行、每行4张图片，但当前设置Flexbox样式后图片仍垂直堆叠。以下是相关代码：

原HTML内嵌脚本代码 #

<script> 
let imgArray = [
             ["./img/Adventure.jpg", "Adventure"],
             ["./img/Girls Trip.jpg", "Girls Trip"],
             ["./img/Nightlife.jpg", "Night Life"],
             ["./img/Relax.jpg","Relax"],
             ["./img/Winery.jpg","Winery"],
             ["./img/Shopping.jpg","Shopping"],
             ["./img/Romance.jpg","Romance"],
             ["./img/Sport.jpg","Sport"]
      ]; 
 
      for (let i = 0; i < imgArray.length; i++) {
        // 创建新DIV
        let newDiv = document.createElement("div");
        newDiv.class="divcell";

          let img = document.createElement("img");
          img.src = imgArray[i][0];
          img.style.width = "276px";
          img.style.height = "221px";
          img.style.margin = "10px";
          img.addEventListener('click', function() {
            if(img.style.border === "2px solid blue"){
                 img.style.border = "none";
                 return;
            }
            img.style.border = "2px solid blue";
          });

          newDiv.appendChild(img);
          
            let div = document.createElement("div");
            div.innerHTML = imgArray[i][1];
            div.style.margin = "5px";
            div.style.padding = "5px";
            newDiv.appendChild(div);
            document.getElementById('imgContainer').appendChild(newDiv);
      }
</script>

原内嵌CSS代码 #

.imgContainer {
    height: 100%;
    display: flex;          /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    text-align: center;      /* 文本居中 */
    flex-direction: row;  /* 子元素水平排列 */
    flex-wrap: wrap;
    align-content: center;
    gap: 10px 20px;
    width: 100%;
}

问题出在两个核心点，修正后即可实现两行4列的布局：

1. 修复JavaScript类名赋值错误 #

DOM元素设置类名需要使用className属性，而非class（class是JavaScript保留字），原代码中newDiv.class="divcell"不会生效，修正为：

newDiv.className = "divcell";

2. 调整容器高度设置 #

原CSS中height: 100%会限制容器高度，导致Flex子元素无法换行（容器高度不足时，flex-wrap: wrap无法触发）。将其替换为自适应高度的设置：

.imgContainer {
    /* 移除height: 100%，添加min-height让容器自适应内容 */
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 改为flex-start避免垂直居中导致的布局挤压 */
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
    width: 100%;
}

3. 可选：优化单元格样式 #

给.divcell添加基础样式，保证每个图片+文字的单元格布局统一：

.divcell {
    display: flex;
    flex-direction: column;
    align-items: center;
}

HTML结构 #

<div id="imgContainer" class="imgContainer"></div>

JavaScript代码 #

let imgArray = [
  ["./img/Adventure.jpg", "Adventure"],
  ["./img/Girls Trip.jpg", "Girls Trip"],
  ["./img/Nightlife.jpg", "Night Life"],
  ["./img/Relax.jpg","Relax"],
  ["./img/Winery.jpg","Winery"],
  ["./img/Shopping.jpg","Shopping"],
  ["./img/Romance.jpg","Romance"],
  ["./img/Sport.jpg","Sport"]
]; 

for (let i = 0; i < imgArray.length; i++) {
  let newDiv = document.createElement("div");
  newDiv.className = "divcell";

  let img = document.createElement("img");
  img.src = imgArray[i][0];
  img.style.width = "276px";
  img.style.height = "221px";
  img.style.margin = "10px";
  img.addEventListener('click', function() {
    if(img.style.border === "2px solid blue"){
      img.style.border = "none";
      return;
    }
    img.style.border = "2px solid blue";
  });

  newDiv.appendChild(img);
  
  let div = document.createElement("div");
  div.innerHTML = imgArray[i][1];
  div.style.margin = "5px";
  div.style.padding = "5px";
  newDiv.appendChild(div);
  document.getElementById('imgContainer').appendChild(newDiv);
}

CSS代码 #

.imgContainer {
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
    width: 100%;
}

.divcell {
    display: flex;
    flex-direction: column;
    align-items: center;
}

内容的提问来源于stack exchange，提问作者Coder Z