1

我需要将一个网页拉入我们的 vBulletin 网站网页，以告知我们的社区我们的服务器状态。基本上，我需要使用 iFrame。我有他们在那里，但我不能让他们并排。

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

<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。任何帮助将不胜感激。

4

1 回答 1

3

嗨，你在寻找这样的东西。

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”方式是添加 align 属性。

但是，HTML5 不支持 iframe align 属性的警告。所以改用 CSS 是正确的方法。话虽如此， align 属性已被弃用，但在所有主要浏览器中仍受支持。

下面是一个演示 align 属性的 jsFiddle。

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

要进一步阅读 align 属性，请查看w3schools

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

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

于 2013-08-26T14:18:07.740 回答