js 去除图片之间的间距

码海扬帆：前端探索之旅

已于 2024-05-15 10:39:22 修改

阅读量278

点赞数 1

分类专栏： uni-app vue 文章标签：前端 javascript html css

于 2024-04-10 21:00:42 首次发布

ZYboke

本文链接：https://blog.youkuaiyun.com/weixin_60529746/article/details/137610707

版权

文章介绍了如何使用Flexbox和Grid布局技术，配合CSS调整，使图片在一行中均匀排列且去除间距。通过设置container为flex-wrap:wrap和调整image元素的宽度、边框等属性，实现在不同屏幕尺寸下适应的图片布局。

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

使用Flexbox 和 Grid 布局，同时去除图片之间的间距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 0;
  }

  .image {
    width: 100%;
    display: block;
  }
</style>
<title>多张图片一行排列去除间距</title>
</head>
<body>
  <div class="container">
    <img src="./center1.png" alt="Image 1" class="image">
    <img src="./center1.png" alt="Image 2" class="image">
    <img src="./center1.png" alt="Image 3" class="image">
  </div>
</body>
</html>

.container 使