如何将图像并排对齐
学习如何使用 CSS 并排对齐图像。
并排的图像画廊



如何并排放置图像
第一步 - 添加 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 图片库