我正在使用
Magnific Popups ajax popup创建一个类似于Instagram的弹出式体验(左侧图片,右侧评论等).我试图弄清楚如何使左右内容框始终保持相同的高度.如果右侧的图像太大,它将恰好适合div,因为它应该是响应的.此外,如果整个浏览器变小(可能在移动设备上),图像将显示在顶部,内容显示在底部.
图像和内容如下:
.image_container,.content { width: 50%; float: left; }
并且只需使用媒体查询减少屏幕大小即可清除浮动.
如果您点击“打开”并调整iframe的大小,您将看到我想要的效果.
那么视图容器如何设置大小,左右内容区域的高度始终相同?只是看一下这个例子就可以看出它看起来有点滑稽了.
编辑
我也试过垂直居中图像,这似乎也是一个挑战.我已经尝试让css显示一个表格单元格,然后尝试vertical-align:middle但是这并没有结束.
该解决方案应适用于所有现代浏览器.
解决方法
你在找这样的吗?
http://jsfiddle.net/d7hA5/
http://jsfiddle.net/d7hA5/
考虑以下功能:
// Handles the resize event $(window) .off(".resizeImage") .on("resize.resizeImage",fnResizeImage); // Resizes the content2 to fit with image height function fnResizeImage (e) { var imgHeight = $('div.image_container > img').outerHeight(true); var cnt1Height = $('div.content > div.content1').outerHeight(true); var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height); }
另外建议看一下插件文档:Magnific-popup API
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。