如何在 HTML/CSS 中制作类似 tumblr 的网格

Question

花了一整天的时间试图找到如何为我的网站制作一个类似 tumblr 的漂亮网格后，我在这里发帖寻求帮助。 这是页面：http://alexis.gargaloni.free.fr/main.html 为了访问我的项目，显示了一个图像网格。目前它看起来不错，但现在我需要添加一些新的东西，它开始看起来很糟糕。 screenshot 如您所见，有一个白色的间隙。我已经尝试了很多事情，但每次都会出现差距（即使它不应该存在）。 这是我想要实现的示例：http://alexgargaloni.tumblr.com

这是我的 HTML 代码（包括过滤器）：

    <div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> TOUT</button>
  <button class="btn" onclick="filterSelection('imprime')"> IMPRIMÉ</button>
  <button class="btn" onclick="filterSelection('digital')"> NUMERIQUE</button>
  <button class="btn" onclick="filterSelection('picture')"> PHOTO</button>
</div>
<div class="pic"> <a href="ego_graphique.html"><img class="filterDiv picture" src="images/ego5-4.jpg" alt="ego graphique" style="width:40% "> </a> <a href="institut_poincare.html"><img class="filterDiv imprime" src="images/ihp1_1.jpg" alt="affiches pour l'institut henri poincaré" style="width:25%"> </a> <a href="jpo_gat_17.html"><img class="filterDiv imprime" src="images/jpogat17.png" alt="portes ouvertes lycée du gué à tresmes 2017" style="width:25%"></a><a href="details_et_des_tailles.html"><img class="filterDiv imprime" src="images/detailbook1.jpg" style="width:35%"></a> <a href="experience_de_la_duree.html"><img class="expav filterDiv digital" src="images/expavstatic.png" alt="expérience de la durée" style="width:35%" ></a></div>

和 CSS：

html {
    position: relative;
    min-height: 100%;

}

body {
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
margin: 0 0 900px; /* bottom = footer height */
padding: 25px;
}

    .img{

    margin: 20px;
}

/* FILTER */    
.container {
    overflow: hidden;
}

.filterDiv {
    float:left;
    /*color: #ffffff;*/
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 13px;
    display:none; /* Hidden by default */

}

.show {
    display: block;

}
.pic
{

      max-width: 100%;
}

我是 HTML 和 CSS 的新手，我知道我的代码不是 100% 干净的，它可能会更加简化，但我正在努力。 对不起，我的英语，我是法国人

感谢您的帮助！

编辑@ben_fluleck

谢谢。 “高度：100%”有问题，因为它修改了我图片的纵横比。如果我用 max-width 和 max-height 改变高度和宽度，白色间隙又回来了。我还需要保持“显示：无”。 filterDiv 使过滤器功能工作（与javascript有关）。而且我现在过滤器有问题，它仍然有效，但图片没有得到它们应有的效果（之前：picture 之后：picture，就像过滤的元素创建一个空白而不是消失）。我试图用 tumblr html 做一些事情，但似乎没有用。简单的事情做起来超级棘手……我真的需要像 tumblr 主题那样欺骗大小本身的东西，因为当我在我的网站上做广告时，我觉得它又会变得一团糟。 是的，我的页脚并没有很好地实现，我在网上查了一种方法来实现它，因为它真的很棘手，而我是如何做到的是我能够让它工作的唯一方法。非常感谢您的帮助！稍后我们可以看到页脚，目前我真的需要关注这个网格

Answer 1

抱歉，我上面的 Css 中的图片应该是图片，因为你已经命名了它们，你可以限制图片，给它们一个宽度属性。我将删除宽度的内联样式并在 Css 中使用百分比。

我已经构建了一个你可以扩展的小提琴，但它应该能让你更好地了解布局。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  }

.box {
  flex: 1 1 auto;
  color: white;
  font-size: 50px;
  text-align: center;
  padding: 10px;
}

/* Colours for each box */

.box1 {
  background: #1abc9c;
}

.box2 {
  background: #3498db;
}

.box3 {
  background: #9b59b6;
}

https://jsfiddle.net/sLjuLjoc/1/

Answer 2

试试这些 CSS 布局，它们会让你的照片井然有序

Flexbox 或 Grid

在主体和工作中设置视口高度

body{
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
/* margin: 0 0 900px; */
padding: 25px;
height: 100vh;
display: flex;
flex-direction: column;
}

.pic {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}

.filterDiv {
float: left;
width: 100%;
line-height: 100px;
text-align: center;
height: 100%; /*optional if you want them to be all the same same */
}

.show {
/* display: block; */
}

Answer 3

我尝试过 Flexbox，但我在大小方面遇到了问题。

这是我自己得到的（定义style="width: 400px;"）：

然后我尝试了您的代码：

仍然是您的代码，但没有为 400px 定义宽度：

所以仍然存在白色间隙的问题，虽然它应该适合，但 Size 不是自动的。