多个 iFrame 并排放置答案

【问题标题】：Multiple iFrames Next To One Another多个 iFrame 并排放置
【发布时间】：2014-12-04 04:45:58
【问题描述】：

大家好，是否可以将 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>");

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

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

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

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

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

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>

【讨论】：

【解决方案2】：

只需使用 css 并编码 iframe 内联块

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

【讨论】：

【解决方案3】：

只需将 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>

【讨论】：

【解决方案4】：

将 3 个 iframe 放入一个表格中：

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

【讨论】：

【解决方案5】：

尝试使用：

style="display:inline"

它应该可以工作。

【讨论】：