使用Java、JSON、Ajax和HTML实现图片-名称对横向排列（当前为纵向）

看起来你是想通过JSON数据渲染一组「图片+下方名称」的组合，现在它们默认纵向堆叠，咱们可以通过调整DOM结构和CSS布局来实现横向排列，以下是具体方案：

1. 先构建合理的DOM结构 #

首先，你需要把每一组图片和名称放在同一个独立容器里，这样才能方便控制它们作为一个整体横向排列。假设你的JSON数据是类似[{imgUrl: "...", name: "..."}, ...]的格式，你可以用JS动态生成DOM元素：

// 示例JSON数据（替换成你实际的数据源）
const imageNamePairs = [
  { imgUrl: "/images/captcha1.jpg", name: "验证图1" },
  { imgUrl: "/images/captcha2.jpg", name: "验证图2" },
  { imgUrl: "/images/captcha3.jpg", name: "验证图3" }
];

const container = document.getElementById('img-container');
container.innerHTML = ''; // 先清空原有内容

imageNamePairs.forEach(pair => {
  // 创建单个图片-名称的容器
  const itemBox = document.createElement('div');
  itemBox.classList.add('image-name-pair');

  // 创建图片元素
  const captchaImg = document.createElement('img');
  captchaImg.src = pair.imgUrl;
  captchaImg.alt = pair.name;

  // 创建名称文本元素
  const nameLabel = document.createElement('span');
  nameLabel.textContent = pair.name;

  // 把图片和名称放进容器
  itemBox.appendChild(captchaImg);
  itemBox.appendChild(nameLabel);
  // 把单个容器加入主容器
  container.appendChild(itemBox);
});

2. 用CSS实现横向排列 #

接下来通过CSS让这些「图片-名称」容器横向排列，同时控制内部元素的对齐方式：

/* 主容器启用flex布局，允许自动换行 */
#img-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 控制每个项之间的间距 */
  padding: 1rem 0;
}

/* 单个图片-名称项的样式：内部纵向排列，居中对齐 */
.image-name-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100px; /* 根据你的需求调整每个项的宽度 */
}

/* 图片自适应容器宽度，避免过大 */
.image-name-pair img {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

3. 适配你现有HTML的注意点 #

你的现有HTML里#img-container带有Bootstrap的input-group类，这个类默认的样式可能会干扰flex布局。建议你要么移除这个类（如果不需要它的样式），要么在#img-container内部新增一个子容器来承载所有「图片-名称」项，比如：

<div class="input-group" id="img-container">
  <!-- 新增这个容器来放横向排列的项，避免Bootstrap样式干扰 -->
  <div class="captcha-list"></div>
</div>

然后在JS里把生成的itemBox放进.captcha-list而不是直接放进#img-container，这样兼容性更好。

这样处理后，每一组图片和名称就会作为一个整体横向并排展示，超出容器宽度时自动换行，完全符合你的需求~

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