2

サイトの Twitch ページを作成していますが、片面に 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

(ズームアウトしました)

誰かが私のためにこれを修正しますか。これがどのように機能するのか理解できないようです。

アラインメントをどのように表示するかの例 (twitch プレーヤーの下部にあるタイトルは無視してください): http://prntscr.com/48xjj2

ありがとう！

4

3 に答える 3

7

object要素とiframe要素の両方が として配置されblockます。つまり、「行」内のスペース全体を使用するのはそれらだけです。2 つの要素を並べて配置できるようにするには、objectを aでラップしてから、次のdivようにします。

#object-div {
    float: left;
}

iframe {
    float: right;
}

そうすることで、両方の要素が同じラインを共有します。block次のようにして、これらの要素をinline要素に変換することもできます。

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

ただし、これは IE8 以降でのみ機能します。

于 2014-08-02T22:19:27.073 に答える
1 
<iframe style="width: 620px; height: 378px;" scrolling="no" frameborder="0" src="twitch url here/embed"></iframe><iframe style="width: 350px; height: 379px;" scrolling="no" frameborder="0" src="twitch url here/chat?popout="></iframe>
<center>
        <a href="twitch url here?tt_medium=live_embed&tt_content=text_link" style="padding: 2px 0px 4px; width: 345px; font-size: 10px; font-weight: normal; text-decoration: underline; display: block;">Watch live video from (twitch user name here) on www.twitch.tv</a>
</center>

<iframe style="width: 620px; height: 378px;" scrolling="no" frameborder="0" src="twitch url here/embed"></iframe><iframe style="width: 350px; height: 379px;" scrolling="no" frameborder="0" src="twitch url here/chat?popout="></iframe>


<a href="twitch url here?tt_medium=live_embed&tt_content=text_link" style="padding: 2px 0px 4px; width: 345px; font-size: 10px; font-weight: normal; text-decoration: underline; display: block;">Watch live video from (twitch user name here) on www.twitch.tv</a>

于 2015-06-25T09:33:03.517 に答える
1

私はあなたの答えに基づいてこれを行い、これを機能させました! 私のコードは次のとおりです...

CSS

#stream { width: 75%; float: left; }
#chat { width: 25%; float: right }

HTML

<section align="center">
        <h1>My LiveStream</h1>
    </section>
    <section>
        <div class="stream" align="center">
            <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>

            <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout="  height="500" width="350">
            </iframe>
        </div>
    </section>
于 2016-01-12T15:54:47.133 に答える