html - 卡片中的Figcaption位置-如何？

我在这里使用砖石外观作为我的卡片https://codepen.io/daiaiai/pen/VPXGZx

在那里，我想通过figcaptions在图像/图的顶部添加一些信息。我试图用position：relative做到这一点，但这是行不通的。我想避免使用负边距顶，但我想不出其他解决方案。应该做什么/怎么做？

与在Codepen上相同，但CSS的原始“代码”为：

body {
  margin: 0; background: #131212;
}
div#masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
  font-size: 0;
}
div#masonry figure {
  width: 33.3%;
  transition: .8s opacity;
}

figcaption{
  position:relative;
  top:100px;
  left:50px;
}

figure img{
  max-width:100%;
}

和那个HTML代码

<div id="masonry">
<figure><figcaption>This girl</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
</figure>
</div>

谢谢你的帮助！

最佳答案

您没有看到figcaption的原因是因为您已将font-size的#masonry设置为0，也许是为了删除列之间的空格。

您需要为font-size分配figcaption来更正此问题。

我还建议更改您的位置。

将position: relative添加到figure，并将position: absolute添加到figcaption。

CODEPEN

片段：

body {
  margin: 0;
  background: #131212;
}
div#masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
  font-size: 0;
}
div#masonry figure {
  width: 33.3%;
  transition: .8s opacity;
  position: relative;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
  width: auto;
  background: black;
  color: white;
}
figure img {
  max-width: 100%;
}
/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
  div#masonry {
    display: block;
  }
  div#masonry img {
    display: inline-block;
    vertical-align: top;
  }
}

<div id="masonry">
  <figure>
    <figcaption>This girl</figcaption>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
  </figure>
  <figure>
</div>

关于html - 卡片中的Figcaption位置-如何？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42001221/