多个 iFrame 彼此相邻

Multiple iFrames Next To One Another

本文关键字：iFrame 多个      更新时间：2023-09-26

嘿伙计们，是否可以将 3 个 iframe 并排放置而不是垂直向下移动页面？这是我需要并排放置的 iframe 代码。

echo("<br /><iframe src='//player.vimeo.com/video/99496559' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99582077' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99579066' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>");

任何帮助将不胜感激。谢谢。

在得到答案之前，我有几个建议。

  • 首先，看看这个代码指南。它将允许您编写更干净的代码。
  • 其次，您不需要使用 echo .你可以，但没有它会更干净。

现在是解决方案。使用CSS的一种方法。这是一个简单的例子，但如果你有很多格式要做，你可能想看看CSS框架。类似于引导程序的东西。

CSS：

.row {
  clear: both;
}
.column-3 {
  float: left;
  width: 30%;
}

该 HTML：

<div class="row">
  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <p><a href="http://vimeo.com/99496559"><b>Daniel talks about the Austplan model</b></a>.</p>
  </div>
  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99582077" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo.com/99582077">Peace of mind</a>.</p>
  </div>
  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99579066" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo.com/99579066">WHO IS DANIEL RENNEBERG?</a>.</p>
  </div>
</div>

只需使用 CSS 并对 iframe 内联块进行编码

iframe{
    display:inline-block;
    /* other designs you want*/
}

只是将 iframe 放在div 中并这样做。

<style>     
      .frame{
      float:left;
      margin:20px;
      }
</style>
<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>
</div>
<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>
</div>
<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>

将 3 个 iframe 放入一个表中：

<table>
<tr>
<td>iframe1</td><td>iframe2</td><td>iframe3</td>
</tr>
</table>

请尝试使用：

style="display:inline"

它应该有效。

相关文章：