如何实现图片并排显示且每张下方对应文字说明的响应式布局

首先我给你改好了可直接运行的代码，改动逻辑简单好懂，你复制过去就能用：

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Life in the Wild</h1>
<div class="container">
  <!-- 每一组图片+说明都用img-card包裹，作为独立单元 -->
  <div class="img-card">
    <img src="https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg" alt="">
    <p class="caption">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic sit laborum, totam dolores aspernatur magnam officiis magni omnis quisquam illo quod eligendi voluptatem excepturi asperiores ut reprehenderit soluta veniam ipsa?</p>
  </div>
  <div class="img-card">
    <img src="https://static.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg" alt="">
    <p class="caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
  </div>
  <div class="img-card">
    <img src="https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg" alt="">
    <p class="caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
  </div>
  <div class="img-card">
    <img src="https://static.pexels.com/photos/158471/ibis-bird-red-animals-158471.jpeg" alt="">
    <p class="caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
  </div>
  <div class="img-card">
    <img src="https://static.pexels.com/photos/133459/pexels-photo-133459.jpeg" alt="">
    <p class="caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
  </div>
  <div class="img-card">
    <img src="https://static.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg" alt="">
    <p class="caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
  </div>
</div>
</body>
</html>

修正后的CSS代码 #

h1 {
  text-align: center;
  font-family: fantasy;
  font-size: 3em;
  border-bottom: 2px solid pink;
  border-right: 2px solid pink;
  /* 改成max-width适配小屏，避免宽度固定溢出 */
  max-width: 400px;
  width: 100%;
  /* 标题居中 */
  margin: 1rem auto;
  box-shadow: 4px 4px 5px #888888;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 加一点左右内边距，小屏不会贴边 */
  padding: 0 1rem;
  gap: 20px;
}

/* 新增图片卡片样式，作为图片+说明的整体容器 */
.img-card {
  /* flex三个值分别是：允许放大、允许缩小、最小宽度300px，屏幕够宽的时候自动并排，不够就换行 */
  flex: 1 1 300px;
  max-width: 450px;
  text-align: center;
  /* hover放大图片时不溢出容器 */
  overflow: hidden;
}

img {
  height: 300px;
  /* 宽度100%适配外层卡片 */
  width: 100%;
  object-fit: cover;
  transition: 0.5s all ease-in-out;
  border-radius: 5%;
}

img:hover {
  transform: scale(1.1);
}

.caption {
  margin: 1rem 0;
}

核心改动说明 #

• 新增img-card容器包裹每一组图片和对应说明，保证两个元素永远绑定在一起不会被flex布局拆分
• 修复了原代码中container同时设置inline-block和flex的样式冲突问题
• 用flex的弹性属性实现响应式：屏幕宽度足够时自动并排，宽度不足时自动换行，手机端也能正常显示
• 优化了标题、图片的适配逻辑，避免小屏设备出现内容溢出、贴边的问题

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