【CSS】多个图片在同一行显示

在下小吉.

已于 2023-03-16 07:26:19 修改

阅读量7.2k

点赞数 11

分类专栏：前端易错合集文章标签： css html css3

于 2023-03-15 23:05:10 首次发布

本文链接：https://blog.csdn.net/m0_72853403/article/details/129572635

版权

前端易错合集专栏收录该内容

8 篇文章

订阅专栏

博客给出核心代码，可实现多个图片在同一行展示。代码运用了相关技术达成此效果，忽略无关信息后，重点在于该代码对图片展示布局的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

⭐请看下面的代码，可以使多个图片在同一行展示

核心代码

display: flex; /*就是可以把多个图片放在一行展示，发不下的话再换行*/

🏳️‍🌈🏳️‍🌈🏳️‍🌈🏳️‍🌈🏳️‍🌈🏳️‍🌈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第三 展示部分</title>
  <style>
    #exhibition {
      width: 980px;
      height: 292px;
      margin: 0 auto;
      padding-top: 170px;
      background-repeat: no-repeat;
    }
    .aaa {
      margin: 0 auto;
      display: flex; /*就是可以把多个图片放在一行展示，发不下的话再换行*/
    }
    div {
      padding-left: 15px;
      height: 260px;
      width: 916px;
    }
  </style>
</head>
<body>
  <div id="exhibition">
    <div class="aaa">
      <div><img src="ikun.png" alt=""></div>
      <div><img src="ikun.png" alt=""></div>
      <div><img src="ikun.png" alt=""></div>
      <div><img src="ikun.png" alt=""></div>
      
    </div>
  </div>
</body>
</html>

结果