如何让 1 个 iframe 在 2 个 iframe 上对齐答案

【问题标题】：How to have 1 iframe align on 2 iframes如何让 1 个 iframe 在 2 个 iframe 上对齐
【发布时间】：2015-05-15 11:29:53
【问题描述】：

我总共有 3 个 iframe：iframe_top、iframe_left 和 iframe_right。

我想要 2 个 iframe iframe_left 和 iframe_right 并排。

我希望它们上方的 1 个 iframe iframe_top 对齐，以便 iframe_top 的左边框与 iframe_left 的左边框对齐，iframe_top 的右边框与@987654330 的右边框对齐@。

我已经能够获得 2 个 iframe iframe_left 和 iframe_right 并排在它们上方，iframe_top：

<div id="div_top">
    <iframe id="iframe_top" name="iframe_top" src="">
    </iframe>
</div>

<div id="div_main">
    <iframe id="iframe_left" name="iframe_left" src="">
    </iframe>

    <iframe id="iframe_right" name="iframe_right" src="">
    </iframe>
</div>

但我找不到对齐的方法。

我尝试使用 CSS 为 div_top 和 div_main 的 2 个 div 设置相同的宽度：

<style type="text/css">
#div_top {
    width: 100%;
}

#div_main {
    width: 100%;
}
</style>

但它不会影响任何事情。如何进行对齐？

【问题讨论】：

标签： html css iframe

【解决方案1】：

如果您只需要对齐它们，则不需要使用包装器：

iframe {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
iframe#iframe_top {
    width: 100%;
}
iframe#iframe_left,
iframe#iframe_right {
    width: 50%;
    margin: 0px;
    vertical-align: top;
}
iframe#iframe_left {
    float: left;
}
iframe#iframe_right {
    float: right;
}

<iframe id="iframe_top" src=""></iframe>
<iframe id="iframe_left" src=""></iframe>
<iframe id="iframe_right" src=""></iframe>

虽然 wrapper 的优点是 <div> 默认没有边框和边距等内容，因此它们对布局更加友好（例如，您不需要为 <div> 使用 box-sizing默认样式）。

【讨论】：

谢谢。当我在 px 中更改 CSS 中 iframe_left 和 iframe_right 的高度时，它可以工作。但是，当我在 CSS 中以 % 更改 iframe_left 和 iframe_right 的高度时，它不起作用。为什么它在 px 中有效，但在 % 中无效？
@ChumboChappati 因为你必须指定你指的是哪个节点的高度百分比。你必须给他们的父母一个height属性，最好将position:relative添加到他们的父母和<iframe>s自己。
我看到的是 height 属性如果我用 % 指定它就不起作用，但如果我用 px 指定它它就起作用。例如，在这个 JSFiddle link 中，我将高度指定为 75%，但没有任何影响。然后在这个 JSFiddle link 中，我将高度指定为 75px 并且它可以工作。在这种情况下，高度只能使用 px 是不是有限制？
@ChumboChappati 因为当你说“75% 高度”时，浏览器必须知道你说的是哪个元素的高度百分比。如果你没有给它的父级指定一个特定的高度（例如<div style="height:auto"><div style="height:75%"></div></div>），浏览器不会为你计算。
好的，我明白了。在您的解决方案中，iframe_left 和 iframe_right 的父级是谁？

【解决方案2】：

我想这就是你要找的。为底部的 2 个 iframe 创建一个包装器。将第一个设置为宽度的一半，然后将第二个 iframe 绝对定位在屏幕宽度的 50% 处。

#iframe_top {
    width: 100%;
}

#div_main {
    position: relative;
    width: 100%
}

#iframe_left {
    position: relative;
    width: 50%
}
#iframe_right {
    position: absolute;
    left: 50%;
    width: 50%
}

<div id="div_top">
    <iframe id="iframe_top" name="iframe_top" src="">
    </iframe>
</div>

<div id="div_main">
    <iframe id="iframe_left" name="iframe_left" src="">
    </iframe>

    <iframe id="iframe_right" name="iframe_right" src="">
    </iframe>
</div>

【讨论】：

谢谢。但是，当我增加 iframe_left 和 iframe_right 的高度时，只有 iframe_right 的高度会增加，正如您在 JSFiddle jsfiddle.net/od7enkzw/1 中看到的那样。如何让左右 iframe 的高度相同？
您可以通过主 div 定义高度，并将每个底部 iframe 设置为 100% 高度，这将使它们填满主 div 的整个高度。 jsfiddle.net/hanniabu/od7enkzw/2
但是为什么我必须以 px 而不是 % 来定义 div_main 的高度？例如，当我将div_main 的高度从 200px 更改为 200% 时，结果并不好。在这种情况下，高度只能使用 px 是不是有限制？
是的，我也注意到了这一点。不幸的是，我不确定为什么这不起作用。但是，百分比通常主要用于响应性的宽度，而高度则大部分用于定义值。如果您出于某种原因不确定确切的高度，那么不幸的是，这对您来说不是一个好的解决方案，除非其他人可以插话如何让百分比起作用。