Question

好吧我正在尝试做的是让Twitch Player和Chat自动调整以修补页面的宽度和高度。目前，当您向下滚动页面时，如果您的浏览器尺寸不合适，则聊天将显示在播放器下方，只是打破一切。这是指向网站http://exudev.ca的当前副本的链接，以便您可以看到我在说什么。

这是HTML

  <div class ="twitch">
      <div class ="twitch-player">
        <object type="application/x-shockwave-flash" height="600" width="1020" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=ifstudios" 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=ifstudios&auto_play=true&start_volume=10" /></object><a href="http://www.twitch.tv/ifstudios" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline; text-align:center;"></a>
      </div>
      <div class ="twitch-chat">
        <iframe frameborder="0" scrolling="no" src="http://twitch.tv/ifstudios/chat?popout=" height="600" width="400"></iframe>
      </div>
    </div>

这是CSS

.twitch {
  background-color: #353535;
  position: relative;
  min-height: 800px;
  margin-right: auto;
  margin-left: auto;
}
.twitch-player {
  float:left;
  display: inline-block;
  float: right;
  margin-right: 50px;
  padding-top: 100px
}
.twitch-chat {
  float:right;
  display: block;
  float: right;
  margin-right: 50px;
  padding-top: 100px
}

Answer 1

很少有东西，首先你要确定聊天在达到特定大小时实际要做什么。问题发生的原因是因为“响应”问题。你有两个容器浮动，.twitch-chat和.twitch-player的静态宽度（由iframe设置）。因此，它们会漂浮到各自的侧面，直到它们都不能再适合屏幕。一旦发生这种情况，其中一个将跳到下一行，我认为这是你遇到的问题。

我的建议是做以下事情：

<强> HTML

<div class="twitch clearfix">
    <div class="twitch-player"><object width="100%"></div>
    <div class="twitch-chat"><iframe width="100%"></div>
</div>

<强> CSS

.twitch {
    position: relative;
    max-width:1400px;
    margin:0 auto;
    background-color:#353535;
    min-height:800px;
}

.twitch-player {
    float:left;
    width:80%;
    padding-left:20px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

.twitch-chat {
    float:right;
    width:20%;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; }

@media only screen and (min-width: 800px) {
    .twitch-player, .twitch-chat {
        width:100%;
    }
}

我没有对你的东西进行全面测试，但它应该会发生以下情况：1）你的视频播放器和聊天不会超过1400像素宽，以屏幕为中心，视频占80％。 2）当屏幕变得小于800px（可以改变到正确的点）时，聊天和视频将占据页面的100％，使“掉落”看起来更自然。

使用CSS自动调整视频

1 个答案: