码农教程 - 一技在手,衣食无忧! tools

目录

如何 - 并排对齐图片

❮ 上一节 下一节 ❯

了解如何使用 CSS 并排对齐图片。

并排图片库

Snow
Forest
Mountains

亲自试一试 »

如何并排放置图片

步骤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属性：

浮动示例

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
亲自试一试 »

如何使用 CSS 创建并排图片flex属性：

Flexbox 示例

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}
亲自试一试 »

笔记：Internet Explorer 10 及更早版本不支持 Flexbox。如果您想使用 float 或 flex 来创建三列布局，则由您决定。但是，如果您需要支持 IE10 及以下版本，则应使用 float。

提示：要了解有关灵活框布局模块的更多信息，阅读我们的 CSS Flexbox 章节。

添加响应能力

或者，您可以添加媒体查询，使图片在特定的屏幕宽度上彼此堆叠，而不是彼此相邻浮动。

以下示例将图片垂直堆叠在宽度为 500 像素或更小的屏幕上：

响应式示例

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}
亲自试一试 »

要了解有关媒体查询的更多信息，请阅读我们的CSS 媒体查询教程。

相关页面

要了解有关如何设置图片样式的更多信息，请阅读我们的CSS 图片教程。

要了解有关 CSS Float 的更多信息，请阅读我们的CSS 浮动教程。

要了解如何使用 CSS 创建图片库，请阅读我们的CSS 图片库教程。


❮ 上一节 下一节 ❯