Question

不确定为什么我无法让它发挥作用。我之前确定我已经使用过这种方法，但无法在其上找到任何内容，也无法解决问题。我有一个包含视频的容器div。视频的高度和宽度将始终遵循原始视频的16：9比例。视频已修复，因为我将向容器（.featured）div添加更多内容，这些内容将叠加在视频上。我需要容器的高度等于视频的高度才能解决我的问题（更不用说我将遇到的响应问题的帮助）。我的代码如下：

        <div class="featured">
        <video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
            <source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
        </video>
        <div class="main-wrap">
            <h1>Learn</h1>
        </div>
    </div><!--end featured-->

我的sass：

.featured{width: 100%; height: auto;
#featured-content{width: 100%; height: auto;position: absolute;}

}

问题是我网站其余部分的内容出现在视频的顶部。需要容器div来匹配视频自动高度的高度，但由于某种原因无法使其工作。非常感谢任何帮助！

Answer 1

您应该可以删除高度指定，并尝试将显示类型调整为内联块：

.featured {
    width: 100%;
    display:inline-block;
    }

Fiddle （为清晰起见，添加了红色边框）

Answer 2

你需要浮动视频。

#featured-content { 
   float: left; 
 }

http://codepen.io/PanosAngel/pen/jqabxJ

容器div等于视频内容的高度

2 个答案: