HTML 实现多图并排显示及添加图说-html教程-PHP中文网

HTML 实现多图并排显示及添加图说

花韻仙語

发布： 2025-08-13 14:46:11

原创

558人浏览过

html 实现多图并排显示及添加图说

本文将介绍如何使用 HTML 和 CSS 实现多张图片并排显示，并在每张图片下方添加对应的文字说明。核心在于利用 inline-block 属性控制图片和文字说明的显示方式，以及 text-align: center 实现文字居中对齐。通过本文，你将掌握一种简单有效的图片布局方法，适用于各种需要图文并茂展示的场景。

在网页设计中，经常需要将多张图片并排显示，并在每张图片下方添加简短的文字说明。传统的 HTML 布局方式，例如使用 <img> 标签直接排列，或者使用 <figure> 和 <figcaption> 标签，可能无法满足并排显示的需求。本文将介绍一种简单而有效的方法，利用 inline-block 属性和 text-align 属性，实现多图并排显示并添加图说的功能。

实现原理

核心思路是将每张图片和对应的文字说明包裹在一个 div 容器中，然后将该 div 容器设置为 display: inline-block。inline-block 属性允许元素像行内元素一样排列，但同时又可以设置宽度和高度，从而实现并排显示的效果。为了使文字说明居中显示，可以将 div 容器的 text-align 属性设置为 center。

立即学习“前端免费学习笔记（深入）”；

HTML 结构

首先，定义 HTML 结构，使用 div 元素作为容器，包含 <img> 标签和 <figcaption> 标签。

<div class="image-wrapper">
    <img src="img1.png" alt="Image 1">
    <figcaption>Caption 1</figcaption>
</div>
<div class="image-wrapper">
    <img src="img2.png" alt="Image 2">
    <figcaption>Caption 2</figcaption>
</div>
<div class="image-wrapper">
    <img src="img3.png" alt="Image 3">
    <figcaption>Caption 3</figcaption>
</div>

登录后复制

在上述代码中，image-wrapper 类用于定义容器的样式，img 标签用于显示图片，figcaption 标签用于显示文字说明。 alt 属性为图片添加替代文本，增强可访问性。

CSS 样式

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

接下来，定义 CSS 样式，设置 image-wrapper 类的属性。

<style>
    .image-wrapper {
        display: inline-block;
        text-align: center;
        margin: 10px; /* 可选：添加外边距，使图片之间有间隔 */
    }

    .image-wrapper img {
        max-width: 200px; /* 可选：限制图片的最大宽度 */
        height: auto;
    }

    .image-wrapper figcaption {
        font-size: 14px; /* 可选：调整文字大小 */
        color: #666; /* 可选：调整文字颜色 */
    }
</style>

登录后复制

在上述代码中，display: inline-block 属性使 div 容器可以并排显示，text-align: center 属性使文字说明居中显示。可以根据需要调整 margin 属性来设置图片之间的间隔。 max-width 和 height: auto 可以用来控制图片的尺寸，保持图片比例。

完整示例

将 HTML 结构和 CSS 样式结合起来，即可实现多图并排显示并添加图说的功能。

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Images with Text</title>
    <style>
        .image-wrapper {
            display: inline-block;
            text-align: center;
            margin: 10px;
        }

        .image-wrapper img {
            max-width: 200px;
            height: auto;
        }

        .image-wrapper figcaption {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>

    <div class="image-wrapper">
        <img src="img1.png" alt="Image 1">
        <figcaption>Caption 1</figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img2.png" alt="Image 2">
        <figcaption>Caption 2</figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img3.png" alt="Image 3">
        <figcaption>Caption 3</figcaption>
    </div>

</body>
</html>

登录后复制

注意事项