并排显示两个 iframe - CSS (1)

📌 相关文章

📜 并排显示两个 iframe - CSS (1)

📅 最后修改于: 2023-12-03 15:39:27.813000 🧑 作者: Mango

并排显示两个 iframe - CSS

介绍

在网页开发中，有时我们需要将两个网页同时显示在一个页面上，这时我们可以使用 iframe 元素来实现。但是默认情况下，这两个 iframe 会分别占据页面的一半，不能实现并排显示。本文将介绍如何使用 CSS 来实现并排显示两个 iframe。

实现步骤

在 HTML 文件中添加两个 iframe 元素，并使用 class 属性指定样式名称。

<iframe class="iframe-left" src="http://example1.com"></iframe>
<iframe class="iframe-right" src="http://example2.com"></iframe>

在 CSS 文件中定义样式名称，并设置样式。

.iframe-left {
  float: left;
  width: 50%;
  height: 500px;
}

.iframe-right {
  float: right;
  width: 50%;
  height: 500px;
}

其中，float 属性用于设置浮动方向，width 属性用于设置宽度，height 属性用于设置高度。这里假设两个 iframe 的高度都为 500px。

如果需要在两个 iframe 之间添加一条分隔线，可以在 CSS 文件中添加如下样式：

.iframe-left {
  border-right: 1px solid #ccc;
}
.iframe-right {
  border-left: 1px solid #ccc;
}

示例代码

<body>
  <iframe class="iframe-left" src="http://example1.com"></iframe>
  <iframe class="iframe-right" src="http://example2.com"></iframe>
</body>

.iframe-left {
  float: left;
  width: 50%;
  height: 500px;
  border-right: 1px solid #ccc;
}

.iframe-right {
  float: right;
  width: 50%;
  height: 500px;
  border-left: 1px solid #ccc;
}

结语

以上就是如何使用 CSS 实现并排显示两个 iframe 的方法。通过设置 float、width 和 height 属性，可以轻松实现这个效果。如果需要添加分隔线，可以通过设置 border 属性来实现。