如何將圖像并排對齊

學習如何使用 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 圖片庫