html - 如何让 1 个 iframe 在 2 个 iframe 上对齐

Question

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

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

我希望 1 个 iframe iframe_top 对齐，以便 iframe_top 的左边框与 iframe_left 的左边框对齐，并且iframe_top 的右边框与 iframe_right 的右边框对齐。

我已经能够并排获得 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 为 2 个 div div_top 和 div_main 设置相同的宽度:

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

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

但不影响任何事情。如何对齐？

Answer 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>默认情况下没有边框和边距等等，因此它们对布局更友好(例如，您不需要使用 box-sizing 作为 <div> 的默认样式)。