javascript - Multiple iFrames Next To One Another - Stack Overflow

admin管理员组

文章数量:1391969

Hey guys is it possible to have 3 iframes next to one another side by side instead of it going down the page vertically? Here is the iframe code i need put next to one another.

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

Any help would be much appreciated. Thankyou.

Hey guys is it possible to have 3 iframes next to one another side by side instead of it going down the page vertically? Here is the iframe code i need put next to one another.

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

Any help would be much appreciated. Thankyou.

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Nov 8, 2019 at 20:52 Matt Mas 3922 silver badges99 bronze badges asked Dec 4, 2014 at 4:45 user3685651user3685651 1111 silver badge33 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

I have a couple of remendations before getting to the answer.

• First, have a look at this Code Guide. It will allow you to write cleaner code.
• Second, you don't need to use echo. You can but it will be cleaner without it.

Now for the solution. One way to do it with Use CSS. This is simple example but if you have lots of formatting to do you might want to look at a CSS framework. Something like bootstrap.

The CSS:

.row {
  clear: both;
}

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

The HTML:

<div class="row">
  <div class="column-3">
    <iframe src="//player.vimeo./video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <p><a href="http://vimeo./99496559"><b>Daniel talks about the Austplan model</b></a>.</p>
  </div>

  <div class="column-3">
    <iframe src="//player.vimeo./video/99582077" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo./99582077">Peace of mind</a>.</p>
  </div>

  <div class="column-3">
    <iframe src="//player.vimeo./video/99579066" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo./99579066">WHO IS DANIEL RENNEBERG?</a>.</p>
  </div>
</div>

just use css and code the iframes inline-block

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

just put iframes in divs and do like that.

<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./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./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./99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>

Put the 3 iframes into a table:

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

try using :

style="display:inline"

it should work.

本文标签： javascriptMultiple iFrames Next To One AnotherStack Overflow