如何在另一个 iFrame 旁边制作 iFrame？答案

【问题标题】：How can I make an iFrame next to another iFrame?如何在另一个 iFrame 旁边制作 iFrame？
【发布时间】：2014-07-02 02:10:08
【问题描述】：

目前代码的工作方式是将 iFrame 放在底部的底部。我希望最后两个 iFrame 彼此相邻，以便一个可以容纳，比如说一个菜单，另一个可以容纳另一个网页。它们需要彼此相邻。这是并排的（没有双关语）

有人建议浮动：左。我试过这个，它确实向左浮动，但它把上面的 iFrame 向左浮动，而不是当前的 iFrame。

代码：

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.w3schools.com" width="600" height="200">
  <p>Your browser does not support iframes.</p>
</iframe>

<iframe src="http://www.w3schools.com" width="200" height="500">
  <p>Your browser does not support iframes.</p>
</iframe>

//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen

<iframe src="http://www.w3schools.com" width="400" height="500">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

新代码：

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.w3schools.com" width="600" height="200">
  <p>Your browser does not support iframes.</p>
</iframe>

<iframe src="http://www.w3schools.com" width="200" height="500">
  <p>Your browser does not support iframes.</p>
</iframe>

//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen

<iframe src="http://www.w3schools.com" width="400" height="500" float : right>
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

【问题讨论】：

CSS: two columns 的可能重复项

标签： html css

【解决方案1】：

很容易，您只需将这两个iframes 的显示设置为inline-block。

iframe:nth-child(2),iframe:nth-child(3){
  display:inline-block;
}

here's an example.

iframes 有点不悦。您可能想考虑将 divs 与 ajax 一起使用，利用 jquery $.load 函数将您喜欢的任何内容加载到其中。你可以阅读here。

希望对您有所帮助...

【讨论】：

【解决方案2】：

这是我的尝试...窗口的宽度必须大于 600px 才能使最后两个 iframe 彼此相邻。我使用div 和clear:both; 来确保最后两个iframe 在第一个iframe 之下

CSS：

body{
    margin:0;
    padding:0;
    width:100%;
}

HTML：

<body>
<iframe src="http://www.w3schools.com" width="600" height="200" style="float:left;"></iframe>
<div style="clear:both;"></div>
<iframe id="test" src="http://www.w3schools.com" width="200" height="500" style="float:left"></iframe>
<iframe id="test1" src="http://www.w3schools.com" width="400" height="500" style="float:left"></iframe>
</body>

DEMO

【讨论】：

【解决方案3】：

您可以通过给它们display: inline-block 样式将两个较低的iframe 设置为并排，就像上面提到的lukeocom 一样。

但是，您还应该给它们box-sizing: border-box 并将它们包装在样式为 display: table 的 div 中，以便它们的宽度包括边框的大小，否则它们将无法与顶部 iframe 很好地对齐，就像 lukeocom 的例子一样。

这就是我的意思：

http://jsfiddle.net/L87PE/1/

完成后，您甚至可以将它们的宽度设为百分比，例如。 width: 34% 和 width: 66%，并让它们填满整个浏览器：

http://jsfiddle.net/L87PE/

【讨论】：