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

但無論如何，當小尺寸（移動尺寸），更好地將視頻移動到第二行。