如何在添加图注后并排显示两张图片？

Question

**问题描述：** 在网页开发或文档排版中，如何在为两张图片添加图注（caption）后，使它们并排显示？常见的技术问题包括：如何使用HTML与CSS实现图片与图注的并排布局，如何保证响应式设计下图注与图片的对齐，以及如何兼容不同浏览器下的显示效果。此外，如何在Markdown或LaTeX中实现类似效果也是常见疑问。本文将探讨多种实现方案，包括Flexbox、Grid布局及表格方式，并提供代码示例与最佳实践建议。

Answer 1

实现两张图片并排显示并添加图注的多种技术方案

1. 基本需求与问题描述

在网页开发或文档排版中，经常需要将多张图片并排展示，并为每张图片添加对应的图注（caption）。然而，实现这一功能并不总是简单直观。常见的技术问题包括：

• 如何使用HTML与CSS实现图片与图注的并排布局？
• 如何保证响应式设计下图注与图片的对齐？
• 如何兼容不同浏览器下的显示效果？
• 如何在Markdown或LaTeX中实现类似效果？

2. HTML + CSS 实现方式

在网页开发中，使用HTML与CSS是最常见的实现方式。以下是几种主流的布局方法：

2.1 使用 Flexbox 布局

Flexbox 是现代网页布局的首选方式之一，它能轻松实现并排布局。

    <div class="flex-container">
      <figure>
        <img src="image1.jpg" alt="图片1">
        <figcaption>图1：描述文字</figcaption>
      </figure>
      <figure>
        <img src="image2.jpg" alt="图片2">
        <figcaption>图2：描述文字</figcaption>
      </figure>
    </div>
  

<style> .flex-container { display: flex; gap: 20px; flex-wrap: wrap; } .flex-container figure { flex: 1 1 45%; text-align: center; } .flex-container img { max-width: 100%; height: auto; } </style>

2.2 使用 CSS Grid 布局

CSS Grid 提供了更强大的二维布局能力，适合复杂的并排结构。

    <div class="grid-container">
      <figure>
        <img src="image1.jpg" alt="图片1">
        <figcaption>图1：描述文字</figcaption>
      </figure>
      <figure>
        <img src="image2.jpg" alt="图片2">
        <figcaption>图2：描述文字</figcaption>
      </figure>
    </div>
  

<style> .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .grid-container figure { text-align: center; } .grid-container img { max-width: 100%; height: auto; } </style>

2.3 使用表格布局（Table Layout）

虽然不推荐用于现代布局，但在某些旧系统中仍可能使用。

    <table>
      <tr>
        <td>
          <figure>
            <img src="image1.jpg" alt="图片1">
            <figcaption>图1：描述文字</figcaption>
          </figure>
        </td>
        <td>
          <figure>
            <img src="image2.jpg" alt="图片2">
            <figcaption>图2：描述文字</figcaption>
          </figure>
        </td>
      </tr>
    </table>
  

3. 响应式设计与兼容性

为了确保在不同设备和浏览器中都能良好显示，需注意以下几点：

• 使用 max-width: 100% 确保图片不会超出容器；
• 使用 flex-wrap 或 grid-template-columns: repeat(auto-fit, ...) 实现响应式换行；
• 为旧版浏览器提供兼容前缀（如 -webkit-、-moz-）；
• 测试主流浏览器（Chrome、Firefox、Safari、Edge）及移动设备。

4. Markdown 与 LaTeX 中的实现方式

在文档排版中，如使用 Markdown 或 LaTeX，也可以实现类似效果。

4.1 Markdown 示例（使用HTML嵌入）

    <div style="display: flex; gap: 20px;">
      <figure>
        <img src="image1.jpg" alt="图片1" width="100%">
        <figcaption>图1：描述文字</figcaption>
      </figure>
      <figure>
        <img src="image2.jpg" alt="图片2" width="100%">
        <figcaption>图2：描述文字</figcaption>
      </figure>
    </div>
  

4.2 LaTeX 示例（使用 minipage）

    \begin{figure}[h]
      \begin{minipage}{0.45\textwidth}
        \centering
        \includegraphics[width=\linewidth]{image1.jpg}
        \caption{图1：描述文字}
      \end{minipage}
      \hfill
      \begin{minipage}{0.45\textwidth}
        \centering
        \includegraphics[width=\linewidth]{image2.jpg}
        \caption{图2：描述文字}
      \end{minipage}
    \end{figure}
  

5. 总结性对比与推荐方案

方法	优点	缺点	适用场景
Flexbox	简单易用，响应式友好	仅支持一维布局	图片并排展示、卡片布局
CSS Grid	强大二维布局，灵活控制	学习曲线较陡	复杂布局需求
表格布局	兼容性好	不语义化，响应式差	遗留系统、简单展示

6. 可视化流程图（Mermaid）

graph TD
      A[开始] --> B[选择布局方式]
      B --> C{是否需要响应式？}
      C -->|是| D[Flexbox 或 Grid]
      C -->|否| E[表格布局]
      D --> F[添加图片与图注]
      E --> F
      F --> G[测试兼容性]
      G --> H[完成]