本文将介绍如何使用 HTML 和 CSS 实现多张图片并排显示，并在每张图片下方添加对应的文字说明。核心在于利用 inline-block 属性控制图片和文字说明的显示方式，以及 text-align: center 实现文字居中对齐。通过本文，你将掌握一种简单有效的图片布局方法，适用于各种需要图文并茂展示的场景。
在网页设计中，经常需要将多张图片并排显示，并在每张图片下方添加简短的文字说明。传统的 HTML 布局方式，例如使用 标签直接排列，或者使用
实现原理
核心思路是将每张图片和对应的文字说明包裹在一个 div 容器中，然后将该 div 容器设置为 display: inline-block。inline-block 属性允许元素像行内元素一样排列，但同时又可以设置宽度和高度，从而实现并排显示的效果。为了使文字说明居中显示，可以将 div 容器的 text-align 属性设置为 center。
立即学习“前端免费学习笔记（深入）”；
HTML 结构
首先，定义 HTML 结构，使用 div 元素作为容器，包含 标签和
<div class="image-wrapper"> @@##@@ <figcaption>Caption 1</figcaption> </div> <div class="image-wrapper"> @@##@@ <figcaption>Caption 2</figcaption> </div> <div class="image-wrapper"> @@##@@ <figcaption>Caption 3</figcaption> </div>
在上述代码中，image-wrapper 类用于定义容器的样式，img 标签用于显示图片，figcaption 标签用于显示文字说明。 alt 属性为图片添加替代文本，增强可访问性。
CSS 样式
接下来，定义 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"> @@##@@ <figcaption>Caption 1</figcaption> </div> <div class="image-wrapper"> @@##@@ <figcaption>Caption 2</figcaption> </div> <div class="image-wrapper"> @@##@@ <figcaption>Caption 3</figcaption> </div> </body> </html>
注意事项
- 确保图片路径正确，并且图片文件存在。
- 可以根据需要调整 CSS 样式，例如修改图片大小、文字颜色、间距等。
- 如果图片数量过多，可能会导致页面显示拥挤，可以考虑使用 CSS Media Queries 来实现响应式布局，在不同屏幕尺寸下调整图片显示方式。
- 使用 alt 属性为图片添加替代文本，有助于提高网页的可访问性。
总结
通过使用 inline-block 属性和 text-align 属性，可以轻松实现多图并排显示并添加图说的功能。这种方法简单易懂，适用于各种需要图文并茂展示的场景。希望本文能帮助你更好地进行网页设计。
评论（已关闭）
评论已关闭