字体颜色：    字体：放大   正常   缩小

div+css网页适应不同分辨率技巧

来源：不详 作者 点击数： 录入时间：08-05-09 11:47:17

在ie6里，带默认下滑条，用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" />
<title>sdf</title>
</head>
<script>
function $(uid){return document.getElementById(uid);}
function lod(){
var b_w=document.documentElement.clientWidth;
$('left').style.width=parseInt(b_w/2)+'px'
$('right').style.width=parseInt(b_w/2)+'px'
}
</script>
<body onload="lod();">
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
#left{float:left; background-color:#FF0000;}
#right{float:left; background-color:#0000FF;}
</style>
<div id="left"></div>
<div id="right"></div>
<p>在ie6里 带默认下滑条 用div布局效果</p>
</body>
</html>

去掉下滑条的情况下，使两列各占50%。缺点是，内容不能超长，适合软件布局使用。

<!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" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;}
</style>
</head>
<body scroll="no">
<div class="left"></div>
<div class="right"></div>
</body>
</html>

在ie6中有下滑条的情况下布局，毛病在于左右两列的宽度不是绝对相等。

<!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" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;}
</style>
</head>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

·上一篇文章：
·下一篇文章：
打印本页 | 关闭窗口
 免责申明：
　　本网站所提供的学习资料目的是为广大网友学习及参考之用，有部分取自互联网，如果您认为本站某些内容有侵权之嫌，请立即通知我们，我们将在第一时间予以删除。
　　我们在此声明，对您使用网站、与本网站相关的任何内容、服务或其它链接至本网站的站点、内容均不作直接、间接、法定、约定的保证。
　　无论在任何原因下（包括但不限于疏忽原因），对您或任何人通过使用本网站上的信息或由本网站链接的信息，或其他与本网站链接的网站信息所导致的损失或损害（包括直接、间接、特别或后果性的损失或损害，例如电脑系统之损坏或数据丢失等后果），责任均由使用者自行承担（包括但不限于疏忽责任）。
　　使用者对本网站的使用即表明同意承担浏览本网站的一切风险。