如何在网站上嵌入twitch.tv频道聊天？

Question

我正在为我的网站制作一个抽搐的页面,我需要有关如何制作它的帮助,所以一边有一个twitch.tv播放器,另一边有twitch.tv聊天.我试过这个:

<div align="left">
    <object type="application/x-shockwave-flash" height="500" width="900"     id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=clodbegamingnetwork" bgcolor="#000000">
        <param name="allowFullScreen" value="true" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowNetworking" value="all" />
        <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
        <param name="flashvars" value="hostname=www.twitch.tv&channel=clodbegamingnetwork&auto_play=true&start_volume=25" />
    </object>

<div align="right">    
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout=" height="500" width="350">
    </iframe>
</div>

但它不起作用.它这样做:

http://prntscr.com/48xiuh

(我缩小了)

所以有人为我解决这个问题.我似乎无法弄清楚这是如何工作的.

我希望看到allignment的示例(忽略twitch播放器底部的标题):http: //prntscr.com/48xjj2

谢谢!

Answer 1

无论是object和iframe元素被定位为block,这意味着他们在"线"使用整个空间的唯一的事.为了允许两个元素并排,您可以将其包装object在a中div然后执行:

#object-div {
    float: left;
}

iframe {
    float: right;
}

通过这样做,两个元素将共享相同的行.您还可以通过执行以下操作将这些block元素转换为inline元素

#object-div, iframe {
    display: inline-block;
}

但这只能从IE8起作用.