响应网站

我正在尝试构建一个简单的响应站点。响应网站

大多数情况下，一切正常。但只要我开始缩小网站，YouTube视频就会碰到下一行。有没有办法解决这个问题，以便它与左侧的广告保持一致？

这里是一个演示网站的链接： http://ctrice.ca/test/rwd/

这是我使用的CSS。

#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; } 

#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; } 

#trailer iframe, 
#trailer object, 
#trailer embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

这是HTML代码：

<div id="ad"><img src="img/ad.jpg" alt="ad" /></div> 

<div id="trailer"> 
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe> 
</div>

来源

2013-06-02 Ctrice

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – SLaks

您还应该有一个用于浮动元素的容器。 –

您将不得不考虑您希望网站如何响应较小的屏幕尺寸。你真的希望广告和视频在一行上保持并排吗（这就是你的意思是“对齐”？）？如果是这样，您必须希望广告缩小以及视频 - 比例应该改变？（考虑广告和视频最终会在手机上产生多少）。如果不是，那么您希望在小屏幕上显示哪个广告位：广告或视频？ – davidtheclark

的问题将在于与iframe中。我希望自己能够记住所有的血腥细节，但最好从谷歌专家那里获取Scott Jehl and "responsive and responsible"视频和任何您可以找到的文章（其中有很多）。他的具体问题是通过iframe传送到波士顿地球的广告。您的问题可能是视频位于iframe中。

我知道我们不会给出答案为“Google for it”，但我的答案指向iframe，并且杰尔提出的许多问题最好留给他。

来源

2013-06-02 20:50:14 Rob

即使我将youtube嵌入代码从#trailer div中取出，当我开始调整页面大小时，它仍会弹出到新行。 – Ctrice

此代码似乎适用于我。当您将高度除以视频的宽度时，会找到CSS中的百分比。

（HTML）

<div class="videoWrapper">  <iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe> </div>

（CSS）

`/ */V I D E的O * W R的P- PéR/*/

.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
} 

.videoWrapper iframe, 
.videoWrapper embed, 
.videoWrapper object { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
}`

希望它为你好运！

来源

2013-06-04 14:15:07 BRich

回答

相关问题