Question

目前代码的工作方式是将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>

Answer 1

轻松完成，您只需将显示设置为这两个iframe的内联块。

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

here's an example

iframe有点不受欢迎。您可能希望考虑将div与ajax一起使用，使用jquery $.load函数将任何您喜欢的内容加载到它们中。您可以阅读here。

希望有帮助...

Answer 2

以下是我的尝试...窗口的宽度必须大于600px，以使最后2 iframe彼此相邻。我使用div clear:both;来确保最后2 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

Answer 3

您可以将两个较低的iframe设置为display: inline-block样式并排设置，如上面提到的lukeocom。

然而，您还应该给它们box-sizing: border-box并将它们包装在样式为display: table的div中，以便它们的宽度包含边框的大小，否则它们将无法与顶部iframe，如lukeocom的例子。

这就是我的意思：

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

完成后，你甚至可以给他们宽度作为百分比，例如。 width: 34%和width: 66%，让它们填满整个浏览器：

http://jsfiddle.net/L87PE/

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

3 个答案: