Как получить iFrames бок о бок?

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> 

** UPDATE * *

Альтернативный способ «НЕТ CSS» добавляет свойство выравнивания.

НО, предупреждение, что атрибут выравнивания iframe не поддерживается в HTML5. Поэтому использовать CSS вместо этого будет правильным. При этом атрибут align не рекомендуется, но поддерживается во всех основных браузерах.

Ниже приведено описание jsFiddle для атрибута align.

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

Для дальнейшего чтения на совместятся приписывать посмотреть на w3schools

Другой способ использует CSS будет встроенный

После больше jsFiddle, но записи демо встроенный CSS http://jsfiddle.net/DJpSN/21/