HTML多图上传预展示纵向排列，如何修改代码实现横向并排展示？

当前图片纵向排列的原因是你插入的<figure>元素为默认块级元素，会独占一行，只需给父容器#images开启弹性布局即可实现横向排列，以下是两种可直接落地的实现方案：

方案1：基于现有Bootstrap框架快速修改（推荐） #

你当前代码已经引入了Bootstrap，直接用自带类即可快速实现：

1. 修改HTML中#images容器代码，添加弹性布局类：

<div id="images" onclick="myFunc()" class="d-flex flex-wrap gap-3">

参数说明：d-flex开启弹性布局让子元素横向排列，flex-wrap控制子元素超出容器宽度后自动换行，gap-3设置每个预览项之间的间距。

2. 调整JS代码，避免图片和说明文字错位：

let fileInput = document.getElementById('file-input');
let imageContainer = document.getElementById('images');

function preview() {
  imageContainer.innerHTML = '';

  for (i of fileInput.files) {
    let reader = new FileReader();
    let figure = document.createElement('figure');
    // 给figure加栅格类，控制每个预览项的宽度
    figure.classList.add('col-sm-3', 'mb-3');
    let figCap = document.createElement('figcaption');
    figCap.innerText = i.name;
    figure.appendChild(figCap);
    reader.onload = () => {
      let img = document.createElement('img');
      // 设置图片自适应容器，固定高度避免变形
      img.classList.add('w-100');
      img.style.height = '120px';
      img.style.objectFit = 'cover';
      img.setAttribute('src', reader.result);
      figure.insertBefore(img, figCap);
    };
    imageContainer.appendChild(figure);
    reader.readAsDataURL(i);
  }
}

方案2：自定义CSS实现（无需修改现有JS/HTML结构） #

如果不想调整现有代码结构，直接在样式表中加入以下CSS即可生效：

#images {
  /* 开启弹性布局实现横向排列 */
  display: flex;
  /* 超出容器宽度自动换行 */
  flex-wrap: wrap;
  /* 预览项之间的间距 */
  gap: 16px;
}
#images figure {
  margin: 0;
  /* 每个预览项的固定宽度 */
  width: 180px;
}
#images figure img {
  width: 100%;
  /* 固定图片高度，避免高低不一致 */
  height: 120px;
  /* 裁剪图片适配容器，不变形 */
  object-fit: cover;
}

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