Question

我有四个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）：

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

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

Answer 2

最简单的方法是将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>

Answer 3

正如评论部分中所述的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

希望这有帮助。

四个iframe，两个并排

3 个答案: