如何创建 - 并排对齐图像
了解如何使用 CSS 并排对齐图像。
Side-by-Side Image Gallery
如何并排放置图像
步骤 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 属性创建并排图像:
注释: Internet Explorer 10 和更早版本不支持 Flexbox。 是否要使用浮动或弹性来创建三列布局取决于您。 但是，如果您需要支持 IE10 及以下版本，则应使用 float。
提示:要了解有关弹性盒布局模块的更多信息，阅读我们的 CSS 弹性盒章节。
添加响应性
或者，您可以添加媒体查询以使图像在特定的屏幕宽度上彼此堆叠，而不是彼此相邻浮动。
以下示例将在 500 像素或以下宽的屏幕上垂直堆叠图像:
Responsive 实例
/* 响应式布局 - 使三列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
亲自试一试 »
要了解有关媒体查询的更多信息，请阅读我们的CSS 媒体查询教程。
相关页面
要了解有关如何设置图片样式的更多信息，请阅读我们的CSS 图片教程。
要了解有关 CSS 浮点的更多信息，请阅读我们的 CSS 浮点教程。
要了解如何使用 CSS 创建图片库，请阅读我们的CSS 图片库教程。
