HTML+CSS实现多图并排布局教程：Flexbox图片画廊与图说设计

在网页设计中，我们经常需要展示多张图片，并且希望它们能够并排显示，同时每张图片可以附带一段说明文字。这种布局可以通过HTML和CSS轻松实现。本文将介绍如何使用HTML和CSS实现多图并排显示，并添加图说。

HTML 结构

首先，我们创建一个包含多张图片和说明文字的HTML结构。每个图片和说明将被放在一个<div>中，这些<div>再被放在一个父容器里。

<div class="gallery">
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1" />
    <p class="caption">这是第一张图片的说明文字</p>
  </div>
  <div class="image-container">
    <img src="image2.jpg" alt="Image 2" />
    <p class="caption">这是第二张图片的说明文字</p>
  </div>
  ...
</div>

CSS 样式

接下来，我们添加CSS样式来实现多图并排显示的效果。我们将使用Flexbox布局，因为它可以方便地实现元素的水平排列和垂直居中对齐。

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.image-container {
  flex: 1 1 calc(33.333% - 10px); /* 每张图片占据大约三分之一宽度，减去间距 */
  margin: 5px;
  position: relative;
}

.image-container img {
  width: 100%; /* 图片宽度占满父容器 */
  height: auto; /* 保持图片比例 */
}

.caption {
  position: absolute;
  bottom: 0; /* 说明文字位于图片底部 */
  width: 100%; /* 说明文字宽度占满父容器 */
  background: rgba(0, 0, 0, 0.5); /* 背景色为半透明黑色 */
  color: white; /* 文字颜色为白色 */
  text-align: center; /* 文字居中 */
}

结果展示

通过上述HTML和CSS代码，我们可以实现多图并排显示，并且每张图片都有一段说明文字。图片将水平排列，如果一行放不下所有图片，它们将自动换行显示。说明文字将位于每张图片的底部，并且背景为半透明黑色，文字颜色为白色。

这种方法利用了Flexbox的强大功能，使得布局更加简洁和灵活。你可以根据需要调整图片的宽度和间距，以及说明文字的样式。

HTMLCSS多图并排Flexbox布局图片说明文字