Question

我有一个图像网格，对于每个图像，我在每个图像之间都有两个figcaption元素呈现为徽章（加上第三个可正确呈现为超链接的徽章），我真正想做的是在底部放置徽章图片本身，但不知道该怎么做。

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00041.html">
                <img src="../images/Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                12 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00041.html">
                    Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                </a>
            </figcaption>
        </figure>
    </div>
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00029.html">
                <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                27 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00029.html">
                    Choir of Trinity College
                </a>
            </figcaption>
        </figure>
    </div>

例如

根据我现在拥有的Olegs答案

Answer 1

您可以使用CSS将其放置在图片顶部

.badge{
   position: relative;
   top: -3em;        
}

.figure-caption {
  position: relative;
  top: -2em
}

这里是附件JSFiddle

在HTML中，如何在图像本身上显示Bootstrap徽章

1 个答案: