我在提交按钮之前显示图像，它看起来像这样：一个接一个的图像

但我想让它并排排列。我该怎么做？这是我的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');
    let figCap = document.createElement('figcaption');
    figCap.innerText = i.name;
    figure.appendChild(figCap);
    reader.onload = () => {
      let img = document.createElement('img');
      img.setAttribute('class', 'col-sm-5');
      img.setAttribute('src', reader.result);
      figure.insertBefore(img, figCap);
    };
    imageContainer.appendChild(figure);
    reader.readAsDataURL(i);
  }
}

这是我的HTML代码。

<代码><；DIV类="；表组COL-MD-12"；>；<；标签>；文件上传<；/标签>；<；DIV类="；输入组COL-XS-12"；>；<；输入类型="；文件"；接受="；图像/*"；ID="；文件输入"；onChange="；预览（）"；类="；表单控制BTN BTN-初级MB-XL-4"；多个>；<；/DIV>；<；DIV类="；行"；>；<；DIV类="；表组COL-MD-12"；>；<；DIV ID="；图像"；onclick="；MyFunc（）"；>；<；/DIV>；

顺晟科技：

我希望这将解决您的问题，将col-sm-5添加到图形标签并设置图像的宽度。

<div class="form-group col-md-12">
    <label>File upload</label>
    <div class="input-group col-xs-12">
        <input type="file" accept="image/*" id="file-input" onchange="preview()"
            class="form-control btn btn-primary mb-xl-4" multiple>
    </div>
    <div class="row">
        <div class="form-group col-md-12">
            <div id="images" onclick="myFunc()">
            </div>

<代码><；link rel=“ stylesheet ” href=“ https：//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ” integrity=“ sha384-ggoyr0ixcbmqv3xipma34md+DH/1fq784/j6cy/ijtquohcwr7x9jvorxt2mzw1t ” crossorigin=“ anonymous ”>；<；DIV CLASS=“ FORM-GROUP col-MD-12 ”>；<；标签>；文件上传<；/标签>；<；DIV CLASS=“输入组COL-XS-12 ”>；<；input type=“ file ” accept=“ image/*” ID=“ file-input ” onchange=“ preview（）” Class=“ form-control btn btn-primary MB-XL-4 ”多个>；<；/DIV>；<；DIV类=“ row ”>；<；DIV CLASS=“ FORM-GROUP col-MD-12 ”>；<；DIV Class=“ row ” ID=“ images ” onclick=“ myfunc（）”>；<；/DIV>；<；/DIV>；<；/DIV>；<；/DIV>；