Question

我正在努力确保当屏幕调整大小时，图像下的标题不会消失，这是当前正在发生的。

非常感谢任何帮助/方向。

#containerr {
  padding-top: 30px;
  height: 300px;
  text-align: justify;
  min-width: 600px;
  box-sizing: border-box;
  //display: block;
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
}

#containerr div {
  width: 400px;
  height: 300px;
  display: inline-block;
  background: red;
}

#containerr:after {
  content: '';
  width: 100%;
  display: inline-block;
}

<div id="containerr">
  <div>
    <a id="single_image1" href="#">
      <img src="example.jpg" alt="" width="400px" height="300px" />
    </a>
    <p> hello this is a world </p>
  </div>

  <div>
    <a id="single_image1" href="#">
      <img src="example2.jpg" alt="" width="400px" height="300px" />
    </a>
    <p> hello this is a world </p>

  </div>

  <div>
    <a id="single_image1" href="#">
      <img src="example3.jpg" alt="" width="400px" height="300px" />
    </a>
    <p> hello this is a world </p>
  </div>
</div>

Answer 1

您的字幕消失的原因是inline-block CSS参考中的containerr div。要解决此问题，您可以将其设为block，这样会显示您的字幕：

#containerr {
padding-top:30px;
height: 300px;
text-align: justify;
min-width: 600px; 
box-sizing: border-box;
display: block;

height: 100%;
margin-left:  100px;
margin-right:  100px;
}

#containerr div {
width: 400px;
height: 300px;
display: block;
background: red;
}

#containerr:after {
content: '';
width: 100%; 
display: inline-block;
}

<div id="containerr">
<div>
<a id="single_image1" href="#">
    <img src="example.jpg" alt="" width="400px" height="300px"/>
</a> 
<p> hello this is a world </p>
</div>

<div>
<a id="single_image1" href="#">
    <img src="example2.jpg" alt="" width="400px" height="300px"/>
</a> 
<p> hello this is a world </p>

</div>

<div>
<a id="single_image1" href="#">
    <img src="example3.jpg" alt="" width="400px" height="300px"/>
</a>
<p> hello this is a world  </p>
</div>
</div>

但我建议您重新组织HTML元素以获得最理想的外观。

此外，不相关但非常重要是您不能像使用id标记一样对多个元素使用相同的a。如果您希望它们具有相同的样式，请改用class。

Answer 2

现在它在图像下显示您的标题。

这是预览：preview image of image caption

尝试在浏览器中测试此代码。

#containerr {
padding-top:30px;
height: 300px;
text-align: justify;
min-width: 600px; 
box-sizing: border-box;
display: block;

height: 100%;
}
#containerr div p{ position: relative;}

#containerr div {
width: 400px;
height: 300px;
display: inline-block;
background: red; margin:50px auto;
}

#containerr:after {
content: '';
width: 100%; 
display: inline-block;
}

<div id="containerr">
<div>
<a id="single_image1" href="#">
    <img src="example.jpg" alt="" width="400px" height="300px"/>
</a> 
<p> hello this is a world </p>
</div>

<div>
<a id="single_image1" href="#">
    <img src="example2.jpg" alt="" width="400px" height="300px"/>
</a> 
<p> hello this is a world </p>

</div>

<div>
<a id="single_image1" href="#">
    <img src="example3.jpg" alt="" width="400px" height="300px"/>
</a>
<p> hello this is a world  </p>
</div>
</div>

确保标题保留在图像下方

2 个答案: