Question

我在这里https://codepen.io/daiaiai/pen/VPXGZx

使用砖石外观

在那里，我想通过图像/图形顶部的图形添加一些信息。我尝试用位置：相对但这不起作用。我想避免使用负边缘 - 但我想不出一个不同的解决方案。什么/应该怎么做？

与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的原因是因为您已将font-size的{{1}}设置为0，可能是为了删除列之间的空格。

您需要将#masonry分配给font-size才能更正此问题。

我还建议您更改定位方式。

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

CODEPEN

<强>片段：

＆＃13;

figcaption

＆＃13;

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

＆＃13;

卡内的位置 - 如何？

1 个答案: