HTML5中实现带figure标题的多张图片同行显示问题求助

嘿，我看你遇到的问题主要是HTML结构不符合语义+CSS布局冲突导致的，咱们一步步来搞定它：

问题根源 #

1. 你把所有图片和标题都塞进了一个<figure>里，但<figure>的正确用法是包裹单个媒体元素（图片/视频等）+ 它对应的标题，多个媒体应该各自用<figure>分开。
2. CSS里给<figcaption>同时设置了display: inline-block和display: table-row，后者会覆盖前者，导致标题变成表格行，直接打乱了横向布局。
3. 原来的浮动只给了左边的图片，中间和右边的没设置，加了标题后自然就上下堆叠了。

解决方案：用Flexbox实现横向排列（最简洁现代的方式） #

先修改你的HTML结构，给每个图片+标题单独套一个<figure>：

<div class="popular"> 
  <figure> 
    <img src="images/kidsride.jpg" alt="popular-rides1" class="ride-img"> 
    <figcaption> Rocket Run </figcaption> 
  </figure>
  <figure> 
    <img src="images/duelingdrags.jpg" alt="popular-rides2" class="ride-img"> 
    <figcaption> Dueling Dragons </figcaption> 
  </figure>
  <figure> 
    <img src="images/familyfall.jpg" alt="popular-rides3" class="ride-img"> 
    <figcaption> Family Fall </figcaption> 
  </figure>
</div>

然后更新CSS，用Flexbox来控制横向布局，同时清理冲突的样式：

.popular{ 
  display: flex; /* 让子元素横向排列 */
  justify-content: center; /* 整体水平居中 */
  gap: 50px; /* 控制每个figure之间的间距，替代原来的margin */
  padding: 20px; 
} 

.ride-img{ 
  border-radius: 50%; 
  filter: drop-shadow(0 0 20px #000); 
} 

figure{ 
  text-align: center; /* 让标题在图片下方居中 */
} 

figcaption{ 
  font-family: Helvetica; 
  font-size: 20px; 
  letter-spacing: 2px; 
  margin-top: 10px; /* 给标题和图片之间加一点间距 */
}

为什么这样改？ #

• 语义更清晰：每个<figure>对应一个游乐设施的图片和标题，符合HTML标准，也方便后续维护。
• Flexbox布局省心：不用再纠结浮动和清除浮动，一行display:flex就能实现横向排列，gap属性能精准控制元素间距。
• 样式更简洁：统一图片类名，去掉重复的CSS代码，同时清理了冲突的display属性，让标题自然居中在图片下方。

如果坚持不想改HTML结构（不推荐，因为不符合语义），也可以尝试给每个<img>和对应的<figcaption>套一个<div>，然后给这些<div>设置display: inline-block，但还是推荐上面的方法，更规范。

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