Question

我使用Magnific Popups ajax popup创建一个类似于Instagram的弹出式体验（左侧图片，右侧评论等）。我试图找出如何使左右内容框始终保持相同的高度。如果右侧的图像太大，它将恰好适合div，因为它应该是响应的。此外，如果整个浏览器变得更小（可能在移动设备上），图像将显示在顶部，内容显示在底部。

图像和内容如下：

.image_container, .content {
    width: 50%;
    float: left;
}

只需使用媒体查询减少屏幕尺寸，即可清除浮动。

我已经帮助了解了我试图解释的内容：

jsFiddle

如果您点击“打开”＆＃39;并调整iframe的大小，你会看到我想要的效果。

那么视图容器如何设置大小并且左右内容区域的高度始终相同？只要看一下这个例子就可以看出它看起来有点滑稽了。

修改

我也尝试过垂直居中，这似乎也是一个挑战。我尝试过让css显示一个表格单元格，然后尝试vertical-align: middle，但这并没有结束。

该解决方案应适用于所有现代浏览器。

Answer 1

当你问垂直对齐时。我想你可能需要像那些有用的东西。

http://jsfiddle.net/twksos/NXZxh/
http://jsfiddle.net/twksos/NfeQN/

我检查了firefox，chrome和safari。还有一些问题。

在chrome和safari中，您需要刷新以查看响应但不仅仅是调整大小。（这很有趣，我正在看它。）
在safari中，＃small-dialog的最大宽度停止工作。

核心部分应该是

.image_container, .content {
    display: table-cell;
    background: #3D6AA2;
    vertical-align: middle;
    width: 50%;
}
@media (min-width: 1px) and (max-width: 638px) {
    .image_container, .content {
        width: 100%;
        display: block;
    }
}
#small-dialog {
    max-width: 850px;
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
    display: table;/*newly added*/
    table-layout: fixed;/*newly added*/
}

Answer 2

您正在寻找这样的人吗？ 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

Answer 3

原始CSS可以（排序），但你必须改变html的结构。如果不使用float，则图像和每个父元素都具有图像的高度+来自其他元素的额外高度以及+/-边距和填充。可以使用margin来显示其父元素之外的元素。我使用它来为图像的父元素着色，然后将图像移出该父元素以获得您想要的外观。

那说我制作的解决方案有些混乱，如果评论超出图像的高度，我怀疑它是否有效。我不知道哪些浏览器“正确”显示（我在这里被迫使用IE9而且我没有花太多时间正确对齐事物）。希望它能让你知道你能做些什么。我认为在这种情况下，一点点jQuery可能更合适。

The 'working' example和the code to generate it。

另一方面说明：尽管各个浏览器的表格有些不一致，但这可能是适合使用它们的地方。

Answer 4

你的问题是，当窗口大小小于x时，特殊媒体css声明将应用于你的图像容器（请使用任何元素检查器检查）

INLINE:57 @media (min-width:1px) and (max-width: 638px)

.image_container, .content {
width: auto;
float: none;
clear: both;
}

删除50％宽度并浮动和所需效果，

只需删除该部分即可按您的意愿使用

欢呼声

Answer 5

我写了三种解决小猫和小狗问题的方法，你可以在下面查看：

但我认为如果您对高度或宽度非常敏感，更好的方法是设置高度和宽度。宽度绝对与Javascript。

使用Javascript：

http://jsfiddle.net/d7hA5/11/

使用CSS方法1：

像这样使用height:100vh：

http://jsfiddle.net/d7hA5/9/

了解 vh ：

http://jsfiddle.net/JamesD/hr8sL/1/

使用CSS方法2：

使用flex:1这样的属性：

http://jsfiddle.net/d7hA5/10/

了解flex的更多示例：

http://jsfiddle.net/VgGbv/

Answer 6

检查一下：

jsfiddle

这是您的代码略有变化。（查看提示的问题评论）。我把你的容器包裹在div中：

<div class="container">

并将这几项更改添加到css：

.container {background-color: white}
.image_container, .content {
    /* width: 50%;*/
    float: left;
    background-color: #1c1c1c;
}
.content2 {
    height: 300px;
    overflow-y: auto;
}

响应弹出窗口

6 个答案: