Html 确保标题保持在图像下方

我试图确保当屏幕缩小时，图像下的标题不会消失，这是目前正在发生的事情

在此方面的任何帮助/指导都将不胜感激

#containerr{
填充顶部：30px；
高度：300px；
文本对齐：对齐；
最小宽度：600px；
框大小：边框框；
//显示：块；
身高：100%；
左边距：100px；
右边距：100px；
}
#集装箱司{
宽度：400px；
高度：300px；
显示：内联块；
背景：红色；
}
#集装箱：在{
内容：''；
宽度：100%；
显示：内联块；
}

你好，这是一个世界

你好，这是一个世界

你好，这是一个世界

​

字幕消失的原因是

containerr div

CSS引用中的

内联块。例如，要解决这个问题，您可以将其设置为
块
，它将显示您的字幕，如下所示：


#containerr{
填充顶部：30px；
高度：300px；
文本对齐：对齐；
最小宽度：600px；
框大小：边框框；
显示：块；
身高：100%；
左边距：100px；
右边距：100px；
}
#集装箱司{
宽度：400px；
高度：300px；
显示：块；
背景：红色；
}
#集装箱：在{
内容：''；
宽度：100%；
显示：内联块；
}

你好，这是一个世界

你好，这是一个世界

你好，这是一个世界

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

以下是预览：

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

#containerr{
填充顶部：30px；
高度：300px；
文本对齐：对齐；
最小宽度：600px；
框大小：边框框；
显示：块；
身高：100%；
}
#containerr div p{position:relative；}
#集装箱司{
宽度：400px；
高度：300px；
显示：内联块；
背景：红色；边距：50px自动；
}
#集装箱：在{
内容：''；
宽度：100%；
显示：内联块；
}


你好，这是一个世界

你好，这是一个世界

你好，这是一个世界

你能把它放在一个plunkr中吗？写这条评论可能比自己写一个plunkr、jsfiddle、codepen或其他任何东西花费更多的时间-@MarcHjorth-你的解决方案没有。它简单地在图像顶部显示标题。。。另外，一旦屏幕足够大，图像就会变得参差不齐……这不是一个解决方案，我只是将您的代码放在一个JSFIDLE中，所以人们不必抱怨：）@zeduke@MarcHjorth-我明白了，我道歉，谢谢。不幸的是，你的解决方案对我不起作用。。它仍然只会在底部显示一个标题，而其他两个标题则隐藏在图像下