js 去除图片之间的间距

码海扬帆：前端探索之旅

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

阅读量208

点赞数 1

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

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

ZYboke

本文链接：https://blog.csdn.net/weixin_60529746/article/details/137610707

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

uni-app

13 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

使用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 使用了 Grid 布局来自动填充列，每列的最小宽度是 300px，并且使用了 grid-gap: 0; 来去除间距。.image 设置了宽度为 100% 以充满其容器，并使用 display: block; 来确保图片之间没有额外的空白间隔。

在现有的 Flexbox 布局上稍作调整，通过将 .container 容器设置为 flex-wrap: wrap; 来实现多张图片一行排列并去除图片之间的间距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .container {
    width: 300px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .image {
    width: calc(33.33% - 2px); /* 计算宽度，并减去边框的宽度 */
    margin: 0; /* 去除默认的外边距 */
    box-sizing: border-box; /* 让边框计入盒模型 */
    border: 1px solid transparent; /* 添加透明边框，用于占位 */
  }

  .image:hover {
    border-color: black; /* 鼠标悬停时显示边框 */
  }
</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>

通过给图片添加了一个透明的边框来占位，同时利用了 calc() 函数计算了每个图片的宽度，并且通过 box-sizing: border-box; 让边框计入盒模型，避免边框增加尺寸。当鼠标悬停在图片上时，边框变为黑色，但这仅是为了演示，你可以根据需要调整边框样式或去除悬停效果。