如何 - 並排對齊圖片
瞭解如何使用 CSS 將影像並排對齊。
並排圖片畫廊
如何將圖片並排放置
步驟 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 不支援 Internet Explorer 10 及更早版本。您可以選擇使用浮動或 flex 來建立三列布局。但是，如果您需要支援 IE10 及更早版本，則應使用浮動。
提示: 要了解更多關於Flexbox佈局模組的資訊，閱讀我們的CSS Flexbox章節。
新增響應式
可選地，您可以新增媒體查詢，以便在特定螢幕寬度下，圖片堆疊在一起而不是並排浮動。
下面的示例將在 500px 寬或更窄的螢幕上垂直堆疊圖片
響應式示例
/* 響應式佈局 - 使三列堆疊在彼此之上，而不是並排 */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
自己動手試一試 »
要了解有關媒體查詢的更多資訊，請閱讀我們的 CSS 媒體查詢教程。
相關頁面
要了解有關如何樣式化圖片的更多資訊，請閱讀我們的 CSS 圖片教程。
要了解有關 CSS Float 的更多資訊，請閱讀我們的 CSS Float 教程。
要了解如何使用 CSS 建立圖片畫廊，請閱讀我們的 CSS 圖片畫廊教程。
