如何使这两个元素不重叠或“碰撞”？答案

【问题标题】：How can I make these two elements not overlap or "collide"?如何使这两个元素不重叠或“碰撞”？
【发布时间】：2016-06-02 08:42:08
【问题描述】：

所以我一直在使用 VideoJS 设置我自己的流媒体页面，我现在想要的只是一个聊天，在这种情况下，一个 Twitch 聊天 iframe，并排。 This is what I have now.

问题在于视频元素位于聊天框下方。我希望它在聊天框架开始的地方结束，所以它们都很好地排列。如果有人能帮我解决这个问题，我将不胜感激。

由于 Stackoverflow 迫使我也在这篇文章中添加代码，所以我想是这样......

HTML：

<head>
  <link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>

</head>
<div id="sidebar-wrapper">
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350">
    </iframe>
        </div>
<div class="wrapper">
  <div class="videocontent">
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls  width="auto" height="auto">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
videojs("videostream", {}, function(){
// Player (this) is initialized and ready.
});
videojs('videostream').ready(function() {
  this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    alwaysCaptureHotkeys: true
  });
});
</script>
</div>
</div>

CSS：

.video-js {padding-top: 56.25%;
margin-right: 20px;
}
.vjs-fullscreen {padding-top: 0px}

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 10000;
    position: fixed;
    right: 250px;
    width: 0;
    height: 100%;
    margin-right: -250px;

    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 350px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

        #content
        {
            top: 0;
            bottom: 0;
            left: 0;
            display: hidden;
        }

【问题讨论】：

标签： html css iframe alignment video.js

【解决方案1】：

您已将视频容器的 width 设置为 100%，因此它占用了其容器（网页）的 width 的 100%。

您可以使用calc 函数来获得预期的行为，因为您必须从容器的width 的100% 中休息聊天（350px）的width。

#videostream{
    width: calc(100% - 350px) !important;
}

Updated Codepen.

【讨论】：