如何使 3 张照片显示内联块 - CSS

在 CSS 中，display 属性用于定义一个元素应该如何显示。默认情况下，一个元素被表现为一个块级元素。如果我们想要将 3 张照片显示为内联块元素，可以使用以下代码：

img {
  display: inline-block;
}

这将把所有 img 元素变成内联块元素。但是请注意，如果您的图片在 HTML 中有间隔，那么请将 font-size 属性设置为 0：

img {
  display: inline-block;
  font-size: 0;
}

接下来，将您的 HTML 代码写成以下样子：

<div>
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

这里我们将 img 元素包装在一个 div 容器元素中，然后将 img 元素设置为内联块元素，以便将它们显示为一行。最终的 CSS 代码如下所示：

div {
  font-size: 0;
}
img {
  display: inline-block;
  vertical-align: top;
}

在这里，我们将 div 元素的 font-size 属性设置为 0 以消除元素间的间距。同时，我们还设置了 img 元素的 vertical-align 属性为 top，以将它们与行的顶部对齐。

希望这篇文章能够帮助您了解如何使用 CSS 将 3 张照片显示为内联块元素。如果您还有任何疑问，请随时在评论部分留言。