將HTML放在正確的位置

Question

Sup guys。我不能用塊來製作頁面，就像他們想要的一樣。我有這個高塊，稱爲「袋」的問題。我嘗試了彈性盒，我嘗試了浮動。也許有人可以幫助我把所有東西放在原來的位置上。

figcaption 
 
{ 
 
\t position: absolute; 
 
\t width: 100%; 
 
    height: 41px; 
 
\t bottom: 0px; 
 
\t padding-top: 13px; 
 
\t padding-left: 20px; 
 
    font-size: 21.333px; 
 
    font-family: "SegoeUIBold"; 
 
    opacity: 0.8; 
 
    background-color: #FFF; 
 
} 
 

 
figure 
 
{ 
 
\t position: relative; 
 
\t cursor: pointer; 
 
\t float: left; 
 
\t margin-right: 10px; 
 
\t margin-bottom: 10px; 
 
}

<main> 
 
     <figure class="huge"> 
 
     <img src="img/greenTshirt.png" alt=""> 
 
     <figcaption>T-Shirts</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/cards.png" alt=""> 
 
     <figcaption>Cards</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/pens.png" alt=""> 
 
     <figcaption>Pens &amp; Pencils</figcaption> 
 
     </figure> 
 
     <figure class="wide"> 
 
     <img src="img/notebooks.png" alt=""> 
 
     <figcaption>Notebooks</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/toys.png" alt=""> 
 
     <figcaption>Toys</figcaption> 
 
     </figure> 
 
     <figure class="high"> 
 
     <img src="img/bags.png" alt=""> 
 
     <figcaption>Bags</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/scrum.png" alt=""> 
 
     <figcaption>Scrum cards</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/magnets.png" alt=""> 
 
     <figcaption>Magnets</figcaption> 
 
     </figure> 
 
     <figure class="big"> 
 
     <img src="img/redCaps.png" alt=""> 
 
     <figcaption>Caps</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/magnets.png" alt=""> 
 
     <figcaption>Magnets</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/pens.png" alt=""> 
 
     <figcaption>Pens &amp; Pencils</figcaption> 
 
     </figure> 
 
     <figure class="normal"> 
 
     <img src="img/toys.png" alt=""> 
 
     <figcaption>Toys</figcaption> 
 
     </figure> 
 
    </main>

圖片： Model

Result

Answer 1

嘗試下面的代碼，而不是你想的人。

CSS：

figcaption { 
      position: absolute; 
      width: 100%; 
      height: 41px; 
      bottom: 0px; 
      padding-top: 13px; 
      padding-left: 20px; 
      font-size: 21.333px; 
      font-family: "SegoeUIBold"; 
      opacity: 0.8; 
      background-color: #FFF; 
     } 

     figure { 
      position: relative; 
      padding: 5em; 
      cursor: pointer; 
      float: left; 
      margin-right: 10px; 
      margin-bottom: 10px; 
     } 

HTML：

<main> 
     <figure> 
      <img src="img/greenTshirt.png" alt=""> 
      <figcaption>T-Shirts</figcaption> 
     </figure> 
     <figure> 
      <img src="img/cards.png" alt=""> 
      <figcaption>Cards</figcaption> 
     </figure> 
     <figure> 
      <img src="img/pens.png" alt=""> 
      <figcaption>Pens &amp; Pencils</figcaption> 
     </figure> 
     <figure> 
      <img src="img/notebooks.png" alt=""> 
      <figcaption>Notebooks</figcaption> 
     </figure> 
     <figure> 
      <img src="img/toys.png" alt=""> 
      <figcaption>Toys</figcaption> 
     </figure> 
     <figure> 
      <img src="img/bags.png" alt=""> 
      <figcaption>Bags</figcaption> 
     </figure> 
     <figure> 
      <img src="img/scrum.png" alt=""> 
      <figcaption>Scrum cards</figcaption> 
     </figure> 
     <figure> 
      <img src="img/magnets.png" alt=""> 
      <figcaption>Magnets</figcaption> 
     </figure> 
     <figure> 
      <img src="img/redCaps.png" alt=""> 
      <figcaption>Caps</figcaption> 
     </figure> 
     <figure> 
      <img src="img/magnets.png" alt=""> 
      <figcaption>Magnets</figcaption> 
     </figure> 
     <figure> 
      <img src="img/pens.png" alt=""> 
      <figcaption>Pens &amp; Pencils</figcaption> 
     </figure> 
     <figure> 
      <img src="img/toys.png" alt=""> 
      <figcaption>Toys</figcaption> 
     </figure> 
    </main> 

，如果你想增加圖像的大小，你可以做到這一點，然後增加在CSS的填充。