css 响应内容位置设置

Question

我正在尝试制作一个包含多列内容框的响应式网站。

每个内容框包含一张照片、一个标题和一个说明。

简而言之，我希望它们每个都以这种格式显示 http://i.stack.imgur.com/ST9pD.png

[X] : 图片
ABC : 标题
xxx : 标题

要指定，我希望 Title 和 Caption 在 Web 视图中一一显示。

虽然标题会在移动视图中隐藏，但标题会在照片上方。

请注意，Title 的长度可能会有所不同，并且会变得很长，需要多行。 像这样：i.stack.imgur.com/ejElB.png（抱歉没有足够的声誉 post 超过 2 个链接）

我已经试了好几天了，
我只能在手机版中实现我想要的，我把我的标题贴在照片的底部。
但是我不知道如何调整title/capion div的位置在网络视图中正确显示它们。

到目前为止我做了什么：（移动视图成功完成，调整window查看） https://fiddle.jshell.net/1esew8dj/1/

一直都是自己学的，如有不妥之处请见谅

Answer 1

您的代码已经远远达到了您的目标。只需添加第二个 div，标题在 image-box 之外，仅在不移动时显示并隐藏原始标题。

喜欢this（我只做了一盒）

更新：

实际上可以更容易地完成，方法是将文本框放在 imageframe 外面，并在移动时将其放在里面，使用绝对定位。喜欢this