如何阻止列中的 div 进入带有 iframe 的另一列下方？

Question

在此页面http://www.prllighting.com/ 上，我在视频旁边（在主横幅下方）有一个 Photoplus 小部件，位于单独的引导列中，我不明白为什么当页面低于 1200 像素时，小部件会位于 iframe 视频下方.我将它们都放在 DIV 中并像这样定义它们：

<div class="photoplus"><script type='text/javascript.....</script></div>
<div class="productpage-video"><iframe width="640" height="360" 
src="https://www.youtube.com/embed/..."></iframe></div>

.photoplus {
display:inline-block;
width: 200px;
height:332px;
}

.productpage-video {
display:inline-block;
} 

如何编辑它，使它们永远不会重叠？

Answer 1

您的“photoplus”类的固定宽度为 200 像素，它应该是百分比宽度。 (100%) 并且它的内容也应该是可调节的宽度，如100％； 而这个类里面的“productpage-video”，iframe有固定的宽度。那个也应该是 100%。

    .photoplus {
        display: inline-block;
        height: 332px;
        width: 100%;
    }

   .photoplus iframe {
       width: 100% !important;
   }

    .productpage-video iframe {
       width: 100% !important;
    } 

但无论如何，当尺寸较小时（对于移动尺寸），最好将视频移动到第二行。