将嵌入式聊天和流与 css 对齐

Question

我正在尝试在 Xenforo（论坛软件）页面上嵌入聊天和我的 twitch 流。我希望视频流为 16:9，因此它是高清的，并且我希望它根据用户的分辨率进行调整。这是我到目前为止要做的事情

   <style>
    .twitch {I
    position: left;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 30px;
    overflow: hidden;
    }


    .twitch iframe {
    position: absolute;
    top: 0;
    left: 0; 
    }


    .chat {
    position: right;
    padding-bottom: 56.25%;
    padding-top: 30px;
    overflow: hidden;
    }


    .chat iframe {
    position: absolute;
    top: 0;
    right: 0;

    }


    .twitchWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
    .twitchWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 70%;
    }

    .chatWrapper {
    position: top;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 50px;
    height: 0;
    }
    .chatWrapper iframe {
    position: top;
    top: 25;
    right: 8;
    width: 29.5%;
    height: 35%;
    }
    </style>

    <div class="twitchWrapper">
    <div class="twitch">
    <iframe frameborder="0" scrolling="no" src="http://www.twitch.tv/Sykikal/embed"></iframe>
    </div>
    </div>
    <div class="chatWrapper">
    <div class="chat">
    <iframe frameborder="0" scrolling="no" src="http://www.videogameinfo.net/forums/chat/popup"></iframe>
    </div>
    </div>

只有两个问题.. 聊天显示太高，与流媒体页面不对齐。 http://videogameinfo.net/forums/pages/stream/

另一个问题是底部 space 太多了。我尝试更改聊天包装器以调整位置，但即使将其更改为 1 或其他内容也会使其偏离并向下移动到底部太远。希望有人能帮忙。

Answer 1

您遇到问题是因为您的 HTML 结构不正确。

下面的space是因为你给chatwrapperclass和chatclass填充了很多。
只需从 中删除 padding-bottom: 56.25%;，class 将删除额外的 space。

还有一个问题：聊天显示太高 因为你给 iframe position:absolute; 而它的 top 是 0。将它更改为更接近 300px;。喜欢：

.chat iframe {
    position: absolute;
    right: 0;
    top: 300px;
}

希望对您有所帮助。

将嵌入式聊天和流与 css 对齐

Aligning embedded chat and stream together with css

html

css

iframe

twitch

xenforo