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

你的＆＃34; photoplus＆＃34; class的固定宽度为200px，宽度应为百分比。（100％）而且它的内在含量也应该是可调宽度的100％; 和＆＃34; productpage-video＆＃34;在这个类中，iframe有固定的宽度。那个也应该是100％。

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

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

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

但无论如何，当尺寸较小（适用于手机尺寸）时，最好将视频移至第二线。

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

1 个答案: