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

在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>

　　推荐阅读

　　CSS教程:使用ul进行网页的多列布局

几天在用CSS写三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方请各位不吝指教。当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式：使>>>详细阅读

本文标题：div css网页适应不同分辨率技巧

地址：http://www.17bianji.com/kaifa2/CSS/17427.html

1/2 1