如何 - 并排对齐图片
了解如何使用 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 图片画廊教程。
