CSS布局：根据浏览器宽度自动把布局从三栏切换成两栏

发表日期：2015-12-19 文章编辑：南昌开优网络浏览次数：3936 标签：CSS应用
<!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=gb2312" /> 
<title>CSS布局：根据浏览器宽度自动把布局从三栏切换成两栏加底栏-开优网络</title> 
<STYLE type="text/css"> 
*{ margin:0; padding:0} 
body{ text-align:center} 
#wrapper{ 
margin-left:auto; 
margin-right:auto; 
text-align:left; 
} 
#header,#footer{ 
clear:both; 
text-align:center; 
} 
h1,p{padding:10px;} 
#main{ 
float:left; 
width:720px; 
} 
#content{ 
float:right; 
width:480px; 
height:360px; 
color:#333; 
background-color:#efefef; 
} 
#extrabar{ 
float:left; 
width:240px; 
height:360px; 
color:#fff; 
background-color:#6666CC; 
} 
.box{ 
float:left; 
width:240px; 
height:120px; 
} 
#sidebar{ float:left;} 
.minwidth{ 
width:720px; 
} 
.maxwidth{ 
width:960px; 
} 
.minwidth #sidebar{ 
width:720px; 
} 
.maxwidth #sidebar{ 
width:240px; 
} 
.s1{ 
color:#fff; 
background-color:#6600CC; 
} 
.s2{ 
color:#fff; 
background-color:#6666CC; 
} 
.s3{ 
color:#fff; 
background-color:#6633CC; 
} 
</STYLE> 
<SCRIPT type="text/javascript"> 
//from http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
wraphandler = { 
init: function() { 
if (!document.getElementById) return; 
// set up the appropriate wrapper 
wraphandler.setWrapper(); 
// and make sure it gets set up again if you resize the window 
wraphandler.addEvent(window,"resize",wraphandler.setWrapper); 
}, 

setWrapper: function() { 
// width stuff from ppk's http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html
var theWidth = 0; 
if (window.innerWidth) { 
theWidth = window.innerWidth 
} else if (document.documentElement && 
document.documentElement.clientWidth) { 
theWidth = document.documentElement.clientWidth 
} else if (document.body) { 
theWidth = document.body.clientWidth 
} 
if (theWidth != 0) { 
if (theWidth < 1000) { 
document.getElementById('wrapper').className = 'minwidth'; 

} else { 
document.getElementById('wrapper').className = 'maxwidth'; 

} 
} 
}, 

addEvent: function( obj, type, fn ) { 
if ( obj.attachEvent ) { 
obj['e'+type+fn] = fn; 
obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 
obj.attachEvent( 'on'+type, obj[type+fn] ); 
} else { 
obj.addEventListener( type, fn, false ); 
} 
} 
} 
wraphandler.addEvent(window,"load",wraphandler.init); 
</SCRIPT> 
</head> 

<body> 

<DIV id="wrapper" class="minwidth"> 
<DIV id="header"> 
<H1>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</H1></DIV> 
<DIV id="main"> 
<DIV id="content"> 
<P>因为要把主内容放这里又想先显示..所以.多套了个div</P> 
<P>因为偷懒..选了几个刚刚好的宽度.高度也写死了..只是让大家能看到切换的效果..</P> 
<P>米美化..用色块显示..奇丑无比.</P> 
<P>相关资料：<A title="关于脚本使用的相关说明." href="http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/">关于脚本使用的相关说明(英文)</A></P></DIV> 
<DIV id="extrabar"> 
<P>这里是ID为extrabar的层...</P></DIV></DIV> 
<DIV id="sidebar"> 
<DIV class="box s1"> 
<P>在ID为sidebar的层里的一个小栏1</P></DIV> 
<DIV class="box s2"> 
<P>在ID为sidebar的层里的一个小栏2</P></DIV> 
<DIV class="box s3"> 
<P>在ID为sidebar的层里的一个小栏3</P></DIV></DIV> 
</body> 
</html>
返回列表
上一篇：CSS布局：右栏固定宽度,左栏内容先出现... 下一篇：CSS布局：自适应高度的CSS布局