如何在HTML / CSS中做類似tumblr的網格

Question

在花了整整一天的時間試圖找到如何為我的網站制作一個類似tumblr的網格之后，我在這里發布以尋求幫助。 這是頁面： http : //alexis.gargaloni.free.fr/main.html為了訪問我的項目，有一個顯示的圖像網格。 目前看起來還不錯，但是現在我需要添加一些新內容，它看起來真的很糟糕。 屏幕截圖如您所見，存在空白。 我已經嘗試了很多事情，並且每次都有差距（即使不應有差距）。 這是我要實現的示例： 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的東西）。 而且我現在也有一個關於filter的問題，它仍然可以工作，但是圖片並沒有達到它們的預期效果（之前： picture after： picture ，就像過濾的元素在創建空白而不是消失一樣）。 我嘗試使用tumblr html進行操作，但似乎沒有用。 簡單的事情非常棘手……我真的需要像tumblr主題這樣的東西來欺騙大小本身，因為當我在網站上發布新內容時，我覺得它又會變得一團糟。 是的，我的頁腳沒有很好地實現，我已經在網上檢查了一種實現方法，因為它確實很棘手，而我的工作方式是使它能夠正常工作的唯一方法。 非常感謝您的幫助！ 稍后我們可以看到頁腳，此刻我真的需要專注於此網格

Answer 1

嘗試這些CSS布局，它們將按順序獲取您的照片

彈性盒或網格

在主體及其工作中設置視口高度

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 2

我嘗試過Flexbox，但我卻難以適應尺寸。

我自己得到的就是這（定義style="width: 400px;" ）：

然后，我嘗試了您的代碼：

仍然是您的代碼，但沒有將寬度定義為400px ：

因此，仍然存在白色間隙的問題，盡管它應該適合，並且大小不是自動的。

Answer 3

抱歉，上面的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/