将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的填充。