我正在使用Magnific Popups ajax popup创建一个类似于Instagram的弹出式体验(左侧图片,右侧评论等).我试图弄清楚如何使左右内容框始终保持相同的高度.如果右侧的图像太大,它将恰好适合div,因为它应该是响应的.此外,如果整个浏览器变小(可能在移动设备上),图像将显示在顶部,内容显示在底部.
图像和内容如下：
.image_container,.content {
width: 50%;
float: left;
}
并且只需使用媒体查询减少屏幕大小即可清除浮动.
我已经做了一个jsfiddle来帮助理解我想要解释的内容：
如果您点击“打开”并调整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
