如何让JavaScript随机图片生成器的输出横向显示

要让生成的图片横向排列，核心是给承载图片的容器添加合适的布局样式，以下是具体实现方法：

方法一：使用Flex布局（推荐） #

Flex布局是现代CSS中实现横向排列最灵活的方式，只需给#result容器添加display: flex即可，还能轻松控制间距和换行行为。

修改后的完整代码：

HTML #

<div id="result" style="display: flex; gap: 10px; flex-wrap: wrap;"></div>

• gap: 10px：设置图片之间的间距（可根据需求调整）
• flex-wrap: wrap：当容器宽度不足时，图片自动换行（不需要的话可以删除）

JavaScript #

function getRandomImage() {
  // 图片数组
  const randomImages = [
    "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg",
    "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
    "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg",
    "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg",
    "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg",
    "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg"
  ];

  // 复制数组避免重复选取同一张图
  const availableImages = [...randomImages];
  const resultContainer = document.getElementById("result");

  for (let i = 0; i < 5; i++) {
    const randomIndex = Math.floor(Math.random() * availableImages.length);
    const selectedImage = availableImages.splice(randomIndex, 1)[0];
    
    // 创建图片元素并添加到容器
    const img = document.createElement("img");
    img.src = selectedImage;
    img.style.width = "150px";
    resultContainer.appendChild(img);
  }
}

getRandomImage();

方法二：使用行内块元素 #

如果需要兼容旧浏览器，可以通过设置图片为行内块元素实现横向排列：

HTML #

<div id="result" style="white-space: nowrap; overflow-x: auto; padding: 10px;"></div>

• white-space: nowrap：强制图片不换行
• overflow-x: auto：当图片总宽度超过容器时，显示横向滚动条

额外CSS（可放在style标签中） #

#result img {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}

这样修改后，生成的随机图片就会横向显示了。

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