如何将图像并排对齐

学习如何使用 CSS 并排对齐图像。

并排的图像画廊

Beijing
Hangzhou
Chongqing

亲自试一试

如何并排放置图像

第一步 - 添加 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>

第二步 - 添加 CSS:

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

浮动实例

/* 三个图像容器(四个图像容器使用 25%,两个图像容器使用 50%,以此类推) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

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

亲自试一试

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

弹性框实例

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

亲自试一试

注意:Flexbox 不支持 Internet Explorer 10 及更早版本。是否要使用 float 或 flex 来创建三列布局取决于您自己。但是,如果您需要支持 IE10 及更低版本,你应该使用浮动。

提示:如需了解有关灵活框布局模块的更多信息,请阅读我们的 CSS Flexbox 教程

添加响应能力

或者,您可以添加媒体查询,使图像在特定的屏幕宽度上堆叠,而不是并排。

下例将在宽度为 500px 或更小的屏幕上将图像垂直堆叠:

响应式实例

/* 响应式布局 - 使三列堆叠而不是并排 */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

亲自试一试

如需了解有关媒体查询的更多信息,请阅读我们的 CSS 媒体查询教程

相关页面

教程:CSS 图像

教程:CSS 浮动

教程:CSS 图片库