如何使“浮动”工作而不会在图像之间留下间隙？

如何解决如何使“浮动”工作而不会在图像之间留下间隙？

这里是非常新的开发人员，我似乎无法弄清楚我的代码正在发生什么。我正在尝试制作一个照相栅格，并试图让它们首先浮动，但是图像留下了我不理解的奇怪间隙。只是试图使它们保持一致，却无法弄清楚我要去哪里。 large gaps in floating.

这是我的代码：

HTML

mongoose.connect(
    `mongodb+srv://@server.mongodb.net/yelp-camp?retryWrites=true&w=majority`,{
        user: config.user,pass: config.pass,useNewUrlParser: true,useUnifiedTopology: true,useFindAndModify: false
    },(err) => {
        if(err) {
            console.log(err)
        } else console.log("Connected");
    });

img {
  width: 30%;
  float: left;
  margin: 1.66%
}
h1  {
  font-family: 'Raleway',sans-serif;
  margin-left: 1.66%
}

解决方法

所以问题是您固定了图像的高度，但没有固定height，因此在演示1中，我为您的图像做了一个错误的示例。

在第二个演示中，您可以看到已添加了高度，并且不再有空隙。但是问题是图像格式不再受到尊重。为了保持良好的格式，您需要将图像包含在“容器”中，以使图像保持最佳格式。

在DEMO 3中，您将看到我们称为“网格系统”，我建议您花些时间阅读以下内容：Grid Layout。目标是修复容器，以确保内容遵循某种格式。

DEMO 4没有主容器，只有float:left位于图像容器上。

所以如果我愿意，我会寻找DEMO 3＆4

演示1错误：>>>检查问题

演示2作品大小不正确：

img {
  width: 30%;
  float: left;
  margin: 1.66%;
  height: 120px; /* Fix height like this */
  max-height: 120px; /* Fix height like this */
}
h1  {
  font-family: 'Raleway',sans-serif;
  margin-left: 1.66%
}

<!DOCTYPE html>
<html>
  <head>
    <title>Photo Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="photogrid.css">
  </head>
  <body>
    
    <h1>Gabe's Decks</h1>
    
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="RW Houndmaster. CURS.jpeg">
    <img src="RWg.jpeg">
    <img src="UR Can't Lose.jpeg">
    <img src="UR Mill copy.jpeg">
    <img src="UR Mill.jpeg">
    <img src="UR Prowess 3-0 (6-0).jpeg">
    <img src="UR Spells 4x overload.jpeg">
    <img src="UR Spells.jpeg">
    <img src="WRb creatures.jpeg">
  </body>
</html>

带有IMG容器的演示3

.container{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.containerIMG{
  width: 30%;
  height: 120px; /* Fix height like this */
  display:flex;
  margin: 1.66%;
}
img {
  
  /*float: left;*/
  width:auto;
  height:auto;
  max-width:100%;  /* Fix height like this */
  max-height: 100%; /* Fix height like this */
  margin:auto;
}
h1  {
  font-family: 'Raleway',sans-serif;
  margin-left: 1.66%
}

<!DOCTYPE html>
<html>
  <head>
    <title>Photo Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="photogrid.css">
  </head>
  <body>
    
    <h1>Gabe's Decks</h1>
    <div class="container">
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
      </div>
      <div class="containerIMG">
        <img src="RW Houndmaster. CURS.jpeg">
      </div>
      <div class="containerIMG">
        <img src="RWg.jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Can't Lose.jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Mill copy.jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Mill.jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Prowess 3-0 (6-0).jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Spells 4x overload.jpeg">
      </div>
      <div class="containerIMG">
        <img src="UR Spells.jpeg">
      </div>
      <div class="containerIMG">
        <img src="WRb creatures.jpeg">
      </div>
    </div>
  </body>
</html>

DEMO 4带有浮动左

.containerIMG{
  float: left;
  width: 30%;
  height: 120px; /* Fix height like this */
  display:flex;
  margin: 1.66%;
}
img {
  width:auto;
  height:auto;
  max-width:100%;  /* Fix height like this */
  max-height: 100%; /* Fix height like this */
  margin:auto;
}
h1  {
  font-family: 'Raleway',sans-serif;
  margin-left: 1.66%
}

<!DOCTYPE html>
<html>
  <head>
    <title>Photo Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="photogrid.css">
  </head>
  <body>
    
    <h1>Gabe's Decks</h1>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    </div>
    <div class="containerIMG">
      <img src="RW Houndmaster. CURS.jpeg">
    </div>
    <div class="containerIMG">
      <img src="RWg.jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Can't Lose.jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Mill copy.jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Mill.jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Prowess 3-0 (6-0).jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Spells 4x overload.jpeg">
    </div>
    <div class="containerIMG">
      <img src="UR Spells.jpeg">
    </div>
    <div class="containerIMG">
      <img src="WRb creatures.jpeg">
    </div>
  </body>
</html>

这会吗？如果是这样（只需增加高度：___），您认为img选择器就可以使用一些像素。休息就好了。

您最初遇到的问题是difference in heights of various images。在这种情况下，浮动广告无法正常运行。给出一定的高度（对于所有图像）以跟随并保持width: auto（您试图给出固定值）或使用flexbox。但是，我认为如果图像数量超过一定数量，那将不是一个合适的解决方案，因为它会尝试适合所有图像-in 1 single row,or column。

img {
  width: auto;
  height: 100px;
  float: left;
  margin: 1.66%
}
h1  {
  font-family: 'Raleway',sans-serif;
  margin-left: 1.66%
}

<!DOCTYPE html>
<html>
  <head>
    <title>Photo Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="photogrid.css">
  </head>
  <body>
    
    <h1>Gabe's Decks</h1>
    
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg">
    <img src="RW Houndmaster. CURS.jpeg">
    <img src="RWg.jpeg">
    <img src="UR Can't Lose.jpeg">
    <img src="UR Mill copy.jpeg">
    <img src="UR Mill.jpeg">
    <img src="UR Prowess 3-0 (6-0).jpeg">
    <img src="UR Spells 4x overload.jpeg">
    <img src="UR Spells.jpeg">
    <img src="WRb creatures.jpeg">
  </body>
</html>

如何使“浮动”工作而不会在图像之间留下间隙？

如何解决如何使“浮动”工作而不会在图像之间留下间隙？

解决方法

相关推荐