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

【问题标题】：Force a div to "float" next to iframe?强制 div 在 iframe 旁边“浮动”？
【发布时间】：2014-10-21 08:41:59
【问题描述】：

我正在开发一个响应式网站，最近通过使用 http://embedresponsively.com/ 的嵌入代码设法让 vimeo 剪辑变得响应式。

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

有人知道如何在不使用浮动或内联块的情况下强制 div 显示在 iframe 旁边（右侧），因为这不起作用（？）同时保持缩放/响应效果vimeo 电影？

提前谢谢你！

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%; 
}

【问题讨论】：

不能使用表格吗？
无论如何，如果你知道如何解决这个问题？

标签： html css iframe responsive-design vimeo

【解决方案1】：

您只需将 width: 100% 添加到 .movie_wrapper ，然后将 float: left 添加到 .movie_info 和 .movie_wrapper 即可。向左添加浮动时视频丢失的问题是因为视频没有宽度，您只有一个最大宽度，而向左浮动则没有宽度（.movie_wrapper 有宽度： 0 和 height: 0)，所以你需要 width: 100% 以便它可以展开（或有一个宽度），然后添加 max-width 到它。

这里的工作示例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%; 
}

【讨论】：

谢谢！这解决了“浮动问题”，不幸的是 vimeo-movie 不再缩放以适应响应式布局？
好吧，这里没有响应式布局。您对父容器有一个固定的宽度 .case_wrapper width: 1200px;您需要对其进行更改，以便它可以响应:) 所以您需要这样的东西jsfiddle.net/ugpdz7qu/2/embedded/result
好吧，我明白你的意思了 :) 这只是更大的开始，希望 ;) 我的意思是 vimeo-iframe 在添加宽度时不会缩放到浏览器窗口：100%到 .movie_wrapper。
什么意思它不能扩展？ iframe 填满了 .movie_wrapper 拥有的所有空间（最大 860px 宽度）。这就是您的代码中的内容，并且可以完美运行:)