css 100％-350px布局的右边界问题 [英] Problem with right-margin with css 100% - 350px layout
问题描述
有人可以帮我解决嵌入vimeo视频的100％-350px布局问题吗?
could anyone please help me with a problem I have been having with a 100% - 350px layout for embedding vimeo video?
似乎右边距属性在这里被忽略了，布局向右溢出.我希望这是一个简单的错误，但似乎我已经尝试了所有方法.我没时间了.
It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I'm hoping this a simple mistake, but seems like I've tried everything. I'm running out of time.
我们将不胜感激.
css:
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
width:100%;
height:100%;
margin-left:350px;
margin-right:350px;
}
.video {
padding:0 0 0 0;
height:100%;
width:100%;
}
html(vimeo嵌入代码已重新格式化以进行验证):
html (the vimeo embed code has been reformatted for validation):
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
<div style="clear:both; height:1px; line-height:0"> </div>
</div>
</div>
我尝试过的另一种解决方案:
Another solution I have tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
</body>
</html>
</head>
I'm using the solution for this type of positioning from this thread: How can I do width = 100% - 100px in CSS?
推荐答案
这是一个可与多种文档类型一起使用的jQuery解决方案，并且可在Chrome，Firefox和IE中使用. IE可能会显示空白页，但这是Vimeo问题，可以通过更新IE flash插件来解决，如所讨论的此处和在此非常广泛.
Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.
我还将代码在线放置了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(function($){
$(window).load(function() {
var h = $(window).height() * 0.9;
var w = $("#content").width();
$(".video").width(w);
$(".video").height(h);
$("#content").css('visibility', 'visible');
});
});
</script>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
</div>
</div>
</body>
</html>
这篇关于css 100％-350px布局的右边界问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
