四个iframe,两个并排

时间:2018-05-01 14:23:23

标签: html iframe

我有四个iframe。我希望它们显示如下:

1 | 2
3 | 4

这是我的代码:

<!doctype html>

<head>
  <style type="text/css">
    .box {
      float: left;
      margin-right: 20px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<html>
<p>
  <div class="box">
    <iframe src="webgl_sphereWithEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus1.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

<p>
  <div class="box">
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus2.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

</html>

<p>没有我期望的效果。我在一条线上并排获得了四个iframe(每张图片都是iframe):

enter image description here

如何在两个iframe之后“破解”?

3 个答案:

答案 0 :(得分:1)

使用浮动和宽度

CSS代码

.box {
    float:left;
    width: 50%;
}
iframe {
    width:100%;
}

HTML代码

<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>

答案 1 :(得分:1)

最简单的方法是将float: left样式替换为display: inline-block。这样做,你也可以摆脱.clear类。 float正在做的是摆脱任何适当的&#34;打破&#34;并使所有元素和#34;浮动&#34;,无论它们是否属于那里。

此外,我建议您将<p>代码更改为<div>,因为他们无论如何都会充当分隔符。

编辑CSS:

<style type="text/css">
    .box {
        display: inline-block;
        margin-right: 20px;
    }
</style>

答案 2 :(得分:1)

正如评论部分中所述的Hidden Hobbes一样,添加PasswordModal() : Promise<string> { this.PasswordModalVisible = true //How to wait for the user to press the "OK" button? } 类和第三个clear类将会起到作用,例如:

box

此外,您还可以将<div class="box clear"> <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe> </div> 类用于存在box的div的父级,例如:

iframe

希望这有帮助。