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”类的固定宽度为200px，它应该是百分比宽度。 （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; 
    } 

但无论如何，当小尺寸（移动尺寸），更好地将视频移动到第二行。