并排对齐图像

---

了解如何使用 CSS 并排对齐图像。

---

Side-by-Side Image Gallery

亲自试一试 »

---

如何并排放置图像

步骤 1) 添加 HTML:

实例

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

---

步骤 2) 添加 CSS:

如何使用 CSS float 属性创建并排图像:

Float 实例

/* 三个图像容器（四个使用 25%，两个使用 50%，等等）*/
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* 清除图像容器后的浮动 */
.row::after {
  content: "";
  clear: both;
  display: table;
} 亲自试一试 »

如何使用 CSS flex 属性创建并排图像:

Flexbox 实例

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
} 亲自试一试 »

注释: Internet Explorer 10 和更早版本不支持 Flexbox。 是否要使用浮动或弹性来创建三列布局取决于您。 但是，如果您需要支持 IE10 及以下版本，则应使用 float。

提示:要了解有关弹性盒布局模块的更多信息，阅读我们的 CSS 弹性盒章节。

---

添加响应性

或者，您可以添加媒体查询以使图像在特定的屏幕宽度上彼此堆叠，而不是彼此相邻浮动。

以下示例将在 500 像素或以下宽的屏幕上垂直堆叠图像:

Responsive 实例

/* 响应式布局 - 使三列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
} 亲自试一试 »

要了解有关媒体查询的更多信息，请阅读我们的CSS 媒体查询教程。

---

相关页面

要了解有关如何设置图片样式的更多信息，请阅读我们的CSS 图片教程。

要了解有关 CSS 浮点的更多信息，请阅读我们的 CSS 浮点教程。

要了解如何使用 CSS 创建图片库，请阅读我们的CSS 图片库教程。