在此页面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;
}
我如何编辑它,使它们永不重叠?
最佳答案
您的“ 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;
}
但是无论如何,当尺寸较小(适用于移动尺寸)时,最好将视频移至第二行。