css两张图片在一行显示

发表于前端技术学习版块 css,教程

下面是一个简单的 CSS 代码，用于让两张图片并排显示在同一行： p { display: flex; justify-content: center; } img { max-width: 50%;

下面是一个简单的 CSS 代码，用于让两张图片并排显示在同一行：

p {
  display: flex;
  justify-content: center;
}

img {
  max-width: 50%;
  height: auto;
  margin: 0 10px;
}

首先，我们使用 `display: flex` 属性将 `

` 标签转换为 Flex 容器。然后，我们使用 `justify-content: center` 属性在 Flex 容器中居中对齐图片。接下来，我们设置 `` 标签的最大宽度为 50%，确保它们都可以适应屏幕宽度。我们还使用 `height: auto` 属性来保持图片的纵横比。最后，我们用 `margin: 0 10px` 属性在图片之间留下一些空隙。现在，您只需将两张图片放入 `

` 标签中，它们就会自动并排显示在同一行。这个代码看起来非常简单，但它可以让您的网页更加美观和易于阅读。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。