CSS 实现多个图片并列排列 - flexbox 和 grid 布局教程

可以使用 CSS 中的 flexbox 布局或者 grid 布局来实现多个图片的并列式排列。

使用 flexbox 布局：

1. 在 HTML 中，将多个图片放在一个容器中，例如一个 div 元素。
2. 在 CSS 中，设置该容器为 flex 容器，即 display: flex;。
3. 设置 flex 容器的 flex-direction 属性为 row，表示横向排列。
4. 设置图片的宽度和高度，以及 margin 属性，使图片之间有一定的间距。

示例代码：

HTML：

<div class='image-container'>
  <img src='image1.jpg'>
  <img src='image2.jpg'>
  <img src='image3.jpg'>
</div>

CSS：

.image-container {
  display: flex;
  flex-direction: row;
}

.image-container img {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

使用 grid 布局：

1. 在 HTML 中，将多个图片放在一个容器中，例如一个 div 元素。
2. 在 CSS 中，设置该容器为 grid 容器，即 display: grid;。
3. 设置 grid 容器的 grid-template-columns 属性，表示每列的宽度。
4. 设置图片的宽度和高度，以及 grid 容器中每个单元格的 padding 属性，使图片之间有一定的间距。

示例代码：

HTML：

<div class='image-container'>
  <img src='image1.jpg'>
  <img src='image2.jpg'>
  <img src='image3.jpg'>
</div>

CSS：

.image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.image-container img {
  width: 200px;
  height: 200px;
  padding: 10px;
}