基础概念

<figure> 和 <figcaption> 是 HTML5 中用于处理图片、图表、视频等多媒体内容的标签。<figure> 标签用于包裹多媒体内容，而 <figcaption> 标签则用于为这些内容提供标题或说明。

相关优势

• 语义化：使用 <figure> 和 <figcaption> 可以使 HTML 代码更具语义化，有助于搜索引擎和屏幕阅读器更好地理解页面内容。
• 结构化：这两个标签有助于将多媒体内容与其描述分离，使页面结构更加清晰。

类型

• 图片：使用 <figure> 包裹 <img> 标签，并使用 <figcaption> 添加描述。
• 视频：使用 <figure> 包裹 <video> 标签，并使用 <figcaption> 添加描述。
• 图表：使用 <figure> 包裹 <canvas> 或其他图表元素，并使用 <figcaption> 添加描述。

应用场景

在博客文章、新闻报道、产品展示等页面中，经常需要展示多媒体内容并为其添加描述。使用 <figure> 和 <figcaption> 可以使这些内容的展示更加规范和美观。

问题及解决方法

问题：在同一行上对齐 <figcaption> 和 <figure> 标签

在默认情况下，<figure> 和 <figcaption> 标签是块级元素，会独占一行。要使它们在同一行上对齐，可以使用 CSS 进行调整。

解决方法

1. 使用 Flexbox 布局

<style>
  .container {
    display: flex;
    align-items: center;
  }
  figure {
    margin-right: 10px;
  }
</style>

<div class="container">
  <figure>
    <img src="example.jpg" alt="Example Image">
  </figure>
  <figcaption>Example Image Description</figcaption>
</div>

1. 使用 Grid 布局

<style>
  .container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
  }
</style>

<div class="container">
  <figure>
    <img src="example.jpg" alt="Example Image">
  </figure>
  <figcaption>Example Image Description</figcaption>
</div>

参考链接

• MDN Web Docs - <figure>
• MDN Web Docs - <figcaption>
• CSS Flexbox
• CSS Grid

通过以上方法，你可以轻松实现 <figure> 和 <figcaption> 标签在同一行上的对齐。