如何 - 将图像并排对齐
了解如何使用 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 属性创建并排图像
浮动示例
/* 三个图像容器 (对于四个使用 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 及更低版本，则应使用浮动。
提示：要详细了解弹性盒子布局模块，请阅读我们的 CSS Flexbox 章节。
添加响应式
可以选择添加媒体查询，使图像在特定屏幕宽度上堆叠在一起，而不是并排浮动。
以下示例将使图像在宽度为 500px 或更小的屏幕上垂直堆叠
响应式示例
/* 响应式布局 - 使三列堆叠在一起，而不是并排 */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
自己尝试 »
要详细了解媒体查询，请阅读我们的CSS 媒体查询教程。
相关页面
要详细了解如何设置图像样式，请阅读我们的CSS 图像教程。
要详细了解 CSS 浮动，请阅读我们的CSS 浮动教程。
要了解如何使用 CSS 创建图像库，请阅读我们的CSS 图像库教程。
