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

【问题标题】：Container div equal height of video content容器 div 等于视频内容的高度
【发布时间】：2016-04-04 23:15:22
【问题描述】：

不知道为什么我不能让它工作。我确定我以前使用过这种方法，但在上面找不到任何东西，也无法解决问题。我有一个包含视频的容器 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-->

还有我的粗鲁：

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

}

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

【问题讨论】：

标签： html css position html5-video

【解决方案1】：

您应该可以放弃高度规范，并尝试将显示类型调整为 inline-block：

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

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

【讨论】：

【解决方案2】：

您需要浮动视频。

#featured-content { 
   float: left; 
 }

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

【讨论】：