使用 inline:block 和可变宽度的响应式布局

Question

我正在修改灯箱（Magnific Popup）布局以包含响应式标题 div。目的是让标题漂浮在照片旁边，然后在调整窗口大小时折叠在照片下方。

我希望标题的最小宽度约为 300 像素（确切的宽度并不重要，可以是百分比）。如果窗口宽度无法容纳照片的组合宽度（因照片而异）+标题的宽度，则标题应在照片下方流动并跨越照片的整个宽度，如下图所示-

问题是这样的：

我尝试在两个 div 上使用 display:inline-block，但在标题 div 折叠到照片下方后无法调整其大小。这可以在 CSS 中完成吗？我知道媒体查询可以做到这一点，但是在这种特殊情况下，很难确定确切的断点，因为每张照片都有不同的宽度。

非常感谢您提供的任何帮助或建议。谢谢。

Answer 1

我认为使用媒体查询最容易做到这一点。设置任意宽度，窗口较宽时标题浮动在右侧，下方为 100% 宽度。即：

/* Without media query */
.caption {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    ...
}

@media (max-width: 640px) {
    .caption {
        position: static;
        width: 100%;
        ...
    }
}

我已经在小提琴中说明了这一点：http://jsfiddle.net/eczYP/。