将HTML放在正确的位置

伙计们。我无法使带有块的bew页面与它们的预期方式相同。我对这个叫做“包”的高块有问题。我试过flex box，我试过float。也许有人能帮我把一切都安排好

figcaption
{
位置：绝对位置；
宽度：100%；
高度：41px；
底部：0px；
填充顶部：13px；
左侧填充：20px；
字号：21.333px；
字体系列：“SegoeUIBold”；
不透明度：0.8；
背景色：#FFF；
}
图形
{
位置：相对位置；
光标：指针；
浮动：左；
右边距：10px；
边缘底部：10px；
}

T恤衫
卡
笔及；铅笔
笔记本
玩具
袋子
Scrum卡
磁铁
帽子
磁铁
笔及；铅笔
玩具

尝试下面的代码，而不是您正在尝试的代码

CSS:

HTML:

T恤衫
卡
笔及；铅笔
笔记本
玩具
袋子
Scrum卡
磁铁
帽子
磁铁
笔及；铅笔
玩具

---

如果你想增加图像的大小，你可以这样做，然后增加css中的填充。

我认为使用插件来实现这一点会更容易，就像这样。即使是flexbox也无法做到这一点并保持现有的结构。这就是为什么砖石建筑如此受欢迎的原因。@RamisWachtler，谢谢，但砖石建筑把一切都安排得如此奇怪，而且砌块之间的空间如此之大，我不确定它是否有用。

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;
        }

<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>