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

【 tulaoshi.com - Web开发 】

在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" /
titlesdf/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