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

编程问答 2022-08-11

问题描述

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

floatinghtmlphoto-gallery

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...