使用内联的响应布局:块和可变宽度
使用内联的响应布局:块和可变宽度
提问于 2013-08-03 05:50:37
我正在修改一个lightbox (Magnific )布局，以包括一个响应标题div。其目的是使标题浮动在照片旁边，然后在调整窗口大小时折叠到照片下面。
我希望标题的最小宽度为300 to (确切的宽度并不重要，这可以是百分比)。如果窗口的宽度不能容纳照片的合并宽度(照片的宽度因照片而异)+标题的宽度，标题应该在照片下面流动，并跨越照片的全部宽度，如图中所示-
问题是：
我曾尝试在两个div上使用display:inline-block，但无法在图片下方折叠后得到标题div来调整大小。这能用CSS实现吗？我知道这在媒体查询中是可能的，但是在这种特殊情况下，很难确定确切的断点，因为每一张照片都有不同的宽度。
非常感谢你可能得到的任何帮助或建议。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-03 12:42:58
我认为这对于媒体查询来说是最简单的。设置任意宽度，当窗口较宽时，标题浮动在右边，并在下面使其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/。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18029796
复制相关文章
相似问题
腾讯云开发者
