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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

虽然包装器的优点是<div>默认没有边框和边距和内容，所以它们更适合布局（例如，您不需要使用box-sizing对于<div>的默认样式。）

Answer 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>

如何在2个iframe上设置1个iframe

2 个答案: