Question

我需要将网页拉入我们的vBulletin网站网页，以告知我们的社区我们的服务器状态。基本上，我需要使用iFrames。我把它们放在那里，但是我不能把它们并排在一起。

我在互联网上搜寻过所有我读过的评论并没有这样做。这是我必须使用的代码：

<center>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=63.251.20.99:6820&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=0&currentPlayersHeight=350&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=74.91.116.62:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
<iframe src="http://cache.www.gametracker.com/components/html0/?host=70.42.74.135:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
</iframe>
</center>

需要彼此并排调整iframe。任何帮助将不胜感激。

Answer 1

你喜欢这样的事吗。

http://jsfiddle.net/DJpSN/

<强> CSS

.box{
    width:200px;
    float:left; 
}

<强> HTML

<div class="box">
   <iframe src="http://cache.www.gametracker.com/components/html0/?host=63.251.20.99:6820&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=0&currentPlayersHeight=350&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
  </iframe>
</div>

<div class="box">
   <iframe src="http://cache.www.gametracker.com/components/html0/?host=74.91.116.62:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
    </iframe>
</div>

<div class="box">
  <iframe src="http://cache.www.gametracker.com/components/html0/?host=70.42.74.135:27015&bgColor=16100D&fontColor=B9946D&titleBgColor=150C08&titleColor=B9946D&borderColor=000000&linkColor=FFFF99&borderLinkColor=FFFFFF&showMap=1&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=180" frameborder="0" scrolling="no" width="100%" height="512">
  </iframe>
</div>

的的 **更新* *

另一种“无CSS”方式是添加对齐属性。

但是，警告HTML5中不支持iframe align属性。所以使用CSS代替将是正确的方法。也就是说，不推荐使用align属性，但仍然支持所有主流浏览器。

下面是演示align属性的jsFiddle。

http://jsfiddle.net/DJpSN/20/

有关align属性的进一步阅读，请查看w3schools

您可以使用css的另一种方式是内联

再一次是一个jsFiddle，但是演示了内联CSS http://jsfiddle.net/DJpSN/21/

如何并排获取iFrame？

1 个答案: