gpt4 book ai didi

layout - css 100% - 350px 布局的右边距问题

转载 作者:太空宇宙 更新时间:2023-11-03 19:23:48 25 4
gpt4 key购买 nike

谁能帮我解决我在使用 100% - 350px 布局嵌入 vimeo 视频时遇到的问题?

似乎右边距属性在这里被忽略了,布局向右溢出。我希望这是一个简单的错误,但似乎我已经尝试了一切。我快没时间了。

非常感谢您的帮助。

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 嵌入代码已重新格式化以进行验证):

<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;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">&nbsp;</div>
</div>
</div>

编辑:我尝试过的另一种解决方案:

<!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&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;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>

编辑:我正在使用此线程中此类定位的解决方案:How can I do width = 100% - 100px in CSS?

最佳答案

这是一个 jQuery 解决方案,适用于多种文档类型以及 Chrome、Firefox 和 IE。 IE 可能会显示一个空白页面,但这是一个 Vimeo 问题,可以通过更新 IE flash 插件来解决,如讨论 herevery extensively here .

我也有placed the code online .

<!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&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
</div>
</div>

</body>
</html>

关于layout - css 100% - 350px 布局的右边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2105773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com