如何让多次粘贴加载的图片实现水平（从左到右）排列？

要让多次粘贴的图片水平排列，只需调整CSS中图片容器和图片的样式即可，核心是限制每个图片容器的宽度，避免其占据整行：

修改后的CSS代码 #

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #181818;
}

.chat-container {
    width: 80%;
    max-width: 800px;
    background-color: #2e2e2e;
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    outline: 2px solid black;
}

.input-container {
    width: 100%;
    min-height: 50px;
    padding: 10px;
    background-color: #1e1e1e;
    border: 1px solid #444;
    border-radius: 5px;
    outline: none;
    color: #fff;
    margin-bottom: 10px;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background-color: #1e1e1e;
    border: 1px solid #444;
    border-radius: 5px;
    min-height: 50px;
    margin-bottom: 10px;
}

.run-button {
    margin-top: 10px;
    padding: 10px;
    background-color: #3b82f6;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.run-button:hover {
    background-color: #2563eb;
}

.img-preview-container {
    position: relative;
    max-width: 150px; /* 限制每个图片容器的最大宽度，可按需调整 */
    flex-shrink: 0; /* 防止容器被压缩变形 */
}

.img-preview {
    width: 100%; /* 图片填满容器 */
    height: auto;
    border-radius: 5px;
}

.remove-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff4d4d;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    padding: 0;
}

关键修改说明 #

1. 给.img-preview-container添加max-width，限制每个图片容器的宽度，避免其占据整行；flex-shrink:0保证容器不会在空间不足时被压缩。
2. 将.img-preview的max-width:100%改为width:100%，让图片填满容器，保持比例的同时统一大小。

配合原有的.image-container的display:flex和flex-wrap:wrap设置，粘贴的图片会自动从左到右水平排列，超出容器宽度时自动换行。

保留原有HTML和JS代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Input with Image Paste</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="chat-container">
      <div class="image-container" id="imageContainer"></div>
      <div
        class="input-container"
        contenteditable="true"
        id="textInput"
        placeholder="Type something"
      ></div>
      <button class="run-button" id="runButton">Run</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

JS代码 #

document.addEventListener('DOMContentLoaded', () => {
  const textInput = document.getElementById('textInput');
  const imageContainer = document.getElementById('imageContainer');
  const runButton = document.getElementById('runButton');

  textInput.addEventListener('paste', (event) => {
      const items = (event.clipboardData || window.clipboardData).items;
      for (const item of items) {
          if (item.type.indexOf('image') !== -1) {
              const file = item.getAsFile();
              const reader = new FileReader();
              reader.onload = (event) => {
                  displayImage(event.target.result);
              };
              reader.readAsDataURL(file);
              event.preventDefault();
          }
      }
  });

  function displayImage(src) {
      const imgContainer = document.createElement('div');
      imgContainer.classList.add('img-preview-container');
      
      const img = document.createElement('img');
      img.src = src;
      img.classList.add('img-preview');
      
      const removeButton = document.createElement('button');
      removeButton.classList.add('remove-button');
      removeButton.textContent = '✖';
      removeButton.addEventListener('click', () => {
          imgContainer.remove();
      });

      imgContainer.appendChild(img);
      imgContainer.appendChild(removeButton);
      imageContainer.appendChild(imgContainer);
  }

  runButton.addEventListener('click', () => {
      console.log('Run button clicked');
  });
});

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