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

Question

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

我想通过图像/图形顶部的无花果字幕添加一些信息。我试图用 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>

感谢您的帮助!

Answer 1

您没有看到 figcaption 的原因是您将 #masonry 的 font-size 设置为 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>