Question

我正在使用自适应网站，最近设法通过使用http://embedresponsively.com/的嵌入代码来获取vimeo剪辑，以便做出响应。

唯一的问题是，当我尝试让div浮动到嵌入式iframe旁边时，Vimeo电影会消失吗？ div也不会在包装器中的iframe旁边显示。

有人知道如何强制div显示在iframe旁边（右边）而不使用float或inline-block，因为它不会起作用（？）并同时保持缩放/响应vimeo-movie的效果？

提前谢谢！

HTML：

<body>

<div class="case_wrapper">
    <div class="movie_wrapper">
        <div class='embed-container'>
            <iframe src='http://player.vimeo.com/video/18085160' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen>
            </iframe>
        </div>
    </div>
    <div class="movie_info"></div>
</div>

</body>

CSS：

.case_wrapper {
    width:1200px;
    height:500px;
    background:#5340AA;
}   

.movie_wrapper {
    max-width:860px;
    max-height:500px;
}

.movie_info {
    width:300px;
    height:500px;
    margin-left:40px;
    background:#53FF00;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

Answer 1

你只需要将宽度：100％添加到.movie_wrapper然后你只需要将float：left添加到.movie_info和.movie_wrapper就可以了。当你添加浮动时视频丢失的原因是因为视频没有宽度，你只有一个最大宽度，并且浮动左边它没有得到宽度（。 movie_wrapper的宽度为：0，高度为0，所以你需要宽度：100％所以它可以传播（或有宽度），然后只需要添加最大宽度。

此处的工作示例http://jsfiddle.net/ugpdz7qu/

.case_wrapper {
    width:1200px;
    height:500px;
    background:#5340AA;
}   

.movie_wrapper {
    width: 100%;
    max-width:860px;
    max-height:500px;
    float: left;
}

.movie_info {
    width:300px;
    height:500px;
    margin-left:40px;
    background:#53FF00;
    float: left;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

强制div在iframe旁边“浮动”？

1 个答案: