html - 将 HTML 放在正确的位置

Question

伙计们。我无法使带有 block 的 bew 页面与它们本来的方式相同。我对这个叫做“袋子”的高 block 有问题。我试过 flex-box，我试过 float。也许有人可以帮助我将所有内容按原样放置。

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;
	cursor: pointer;
	float: left;
	margin-right: 10px;
	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 中的填充。