三列布局，读《css那些事儿》
1、两列定宽，中间自适应
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动
原理：mainbox的浮动并将其宽度设置为100%，次要内容及侧边栏设置固定宽度并浮动，mainbox中的.contentd的默认宽度设置为值（auto），margin左右所留的空白等于两列的宽度，并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、js实现等高 原理：mainbox的浮动并将其宽度设置为100%，次要内容及侧边栏设置固定宽度并浮动，mainbox中的.contentd的默认宽度设置为值（auto），margin左右所留的空白等于两列的宽度，并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。。--> <style type="text/css"> *{padding:0;margin:0;} .mainbox{background:#ccc;width:100%;float:left;} .mainbox .content{margin:0 210px 0 0;background:red} .sidebox{width: 200px;float:left;background:green;margin-left:-200px;} .footer{background:yellow} .container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } </style> </head> <body> <div class="container" > <div class="mainbox" id="mainbox"> <div class="content"> <h1> mainbox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> </div> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> </div> <div class="footer"><h1>footer底部</h1></div> <!--增加js代码实现两列等高--> <script type="text/javascript"> var mh = document.getElementById('mainbox'); var sh = document.getElementById('sidebox'); if (mh.clientHeight < sh.clientHeight) { mh.style.height = sh.clientHeight + "px"; } else { sh.style.height = mh.clientHeight + "px"; } </script> </body> </html>
2、三列自适应方法1
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、负边距实现等高
原理：宽度及margin值使用百分比形式，原理可参考1、两列定宽，中间自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--原理可参考三列布局：两列定宽，中间自适应，宽度及margin值使用百分比。 要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、负边距实现等高 --> <style type="text/css"> *{padding:0;margin:0;} .container{ overflow:hidden;}/*负边距实现等高效果必须条件三*/ .mainbox{float:left;background:red;width:100%;} .mainbox .content{margin:0 40% 0 20%} .subminbox{width:20%;float:left;background:yellow;margin-left:-100%;} .sidebox{width: 40%;float:left;background:green;margin-left:-40%;} .footer{background:darkseagreen;clear:both;} .sidebox,.mainbox,.subminbox{ margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */ padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */} </style> </head> <body> <div class="container"> <div class="mainbox"> <div class="content"> <h1>maibox主要内容</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p></div> </div> <div class="subminbox"><h1>subminbox次要内容</h1></div> <div class="sidebox"><h1>sidebox侧边栏</h1></div> </div> <div class="footer"><h1>footer底部</h1></div> </body> </html>
3、三列自适应方法2
要点：浮动、宽度分别设置百分比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：浮动、宽度分别设置百分比、等高实现--> <style type="text/css"> *{padding:0;margin:0;} .mainbox{background:red;width:60%;float:left;} .subminbox{width:30%;float:left;background:yellow;} .sidebox{width: 10%;float:left;background:green;} .footer{clear:both;} </style> </head> <body> <div class="container"> <div class="mainbox" id="mainbox"> <h1>maibox主要内容</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> <div class="subminbox" id="subminbox"><h1>subminbox次要内容</h1></div> <div class="sidebox" id="sidebox"><h1>sidebox侧边栏</h1></div> </div> <div class="footer"><h1>footer底部</h1></div> </body> </html>
4、一列定宽，两列自适应
主要原理是mainbox的浮动并将其宽度设置为100%，将subminbox宽度设置为百分比，将sidebox宽度设置为固定值，
再利用mainbox中的.contentd的默认宽度值（auto）与margin左右所留的空白，及利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列布局，一列定宽，两列自适应</title> <!--主要原理是mainbox的浮动并将其宽度设置为100%，将subminbox宽度设置为百分比，将sidebox宽度设置为固定值， 再利用mainbox中的.contentd的默认宽度值（auto）与margin左右所留的空白，及利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。--> <style type="text/css"> *{padding:0;margin:0;} /*设置主要内容的外层div标签浮动，并将宽度设置为100%；*/ .mainbox{background:red;width:100%;float:left;} /*设置主要内容的内层div的magin值，留出空白位置给左右两列，要注意左侧的magin值为百分比，意味着左侧留出的空白位置是自适应的*/ .mainbox .content{margin:0 200px 0 40%} /*将次要内容设置左浮动，并设置宽度为40%，左侧边距为-100%*/ .subminbox{width:40%;float:left;background:yellow;margin-left:-100%;} /*将侧边距设置左浮动，并设置宽度为200px，负边距为左侧-200px*/ .sidebox{width: 200px;float:left;background:green;margin-left:-200px;} .footer{clear:both;} </style> </head> <body> <div class="container"> <div class="mainbox"> <div class="content"><h1>maibox主要内容</h1></div> </div> <div class="subminbox"><h1>subminbox次要内容</h1></div> <div class="sidebox"><h1>sidebox侧边栏</h1></div> </div> <div class="footer"><h1>footer底部</h1></div> </body> </html>
5、实现三列等高
方法1：负边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--要点与原理同两列等高方法1--> <style type="text/css"> * { margin:0; padding:0; } .header, .footer { /*height:30px;*/ /*line-height:30px;*/ /*text-align:center;*/ color:#FFFFFF; background-color:#AAAAAA; } .container { float:left; width:100%; text-align:center; overflow:hidden; /* 截去超过.container标签之外的多余部分 */ color:#FFFFFF; } .mainBox { float:left; width:100%; margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */ padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */ } .mainBox .content { margin:0 21% 0 41%; background-color:#000000; } .subMainBox { float:left; width:40%; margin-left:-100%; margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */ padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */ background-color:#666666; } .sideBox { float:left; width:20%; margin-left:-20%; margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */ padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */ background-color:#666666; } .footer { clear:both; } </style> </head> <body> <!-- 三列等高（负边距实现-自适应宽度）--> <div class="header">头部信息</div> <div class="container"> <div class="mainBox"> <div class="content"> <p>主要内容区域</p> <p>多一点文字信息</p> <p>更能看得清楚到底是是不是等高</p> <p>吃饱了才会撑开</p> <p>差不多饱了</p> <p>不用太饱~</p> </div> </div> <div class="subMainBox">次要内容区域</div> <div class="sideBox">侧边栏</div> </div> <div class="footer">底部信息</div> </body> </html>
方法2：js实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--使用js实现三列等高,引用equalColumns.js--> <script type="text/javascript" src="css/equalColumns.js"></script> </head> <style type="text/css"> * { margin:0; padding:0; } .header, .footer { height:30px; line-height:30px; text-align:center; color:#FFFFFF; background-color:#AAAAAA; } .container { float:left; width:100%; text-align:center; color:#FFFFFF; } .mainBox { float:left; width:100%; } .mainBox .content { margin:0 21% 0 41%; background-color:#000000; } .subMainBox { float:left; width:40%; margin-left:-100%; background-color:#666666; } .sideBox { float:left; width:20%; margin-left:-20%; background-color:#666666; } .footer { clear:both; } </style> </head> <body onload="equalColumns('subMainBox','m_content','sideBox')"> <!-- 三列等高（负边距实现-自适应宽度）--> <div class="header">头部信息</div> <div class="container"> <div class="mainBox" > <div class="content" id="m_content"> <p>主要内容区域</p> <p>多一点文字信息</p> <p>更能看得清楚到底是是不是等高</p> <p>吃饱了才会撑开</p> <p>差不多饱了</p> <p>不用太饱~</p> </div> </div> <div class="subMainBox" id="subMainBox">次要内容区域</div> <div class="sideBox" id="sideBox">侧边栏</div> </div> <div class="footer">底部信息</div> </body> </html>
//div等高控制 function columnHeight(){ var i,oh,hh,h=0,dA=document.w3cooleqc,an=document.w3cooleqa; if(dA && dA.length){ an=1; for(i=0;i<dA.length;i++){ dA[i].style.height='auto'; } for(i=0;i<dA.length;i++){ oh=dA[i].offsetHeight; h=(oh>h)?oh:h; } for(i=0;i<dA.length;i++){ if(an){ dA[i].style.height=h+'px'; }else{ equalActive(dA[i].id,dA[i].offsetHeight,h); } } if(an){ for(i=0;i<dA.length;i++){ hh=dA[i].offsetHeight; if(hh>h){ dA[i].style.height=(h-(hh-h))+'px'; } } }else{ document.w3cooleqa=1; } document.w3cooleqth=document.body.offsetHeight; document.w3cooleqtw=document.body.offsetWidth; } } function blanceHeight(){ if(document.w3cooleqth!=document.body.offsetHeight||document.w3cooleqtw!=document.body.offsetWidth){ columnHeight(); } } function equalColumns(){ if(document.getElementById){ document.w3cooleqc=new Array; for(i=0;i<arguments.length;i++){ document.w3cooleqc[i]=document.getElementById(arguments[i]); } setInterval("blanceHeight()",10); } } function equalActive(el,h,ht){ var sp=1000,inc=1000,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height); ch=(ch)?ch:h; var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px'; oh=g.offsetHeight; if(oh>ht){ nh=(ht-(oh-ht));g.style.height=nh+'px'; } if(nh<adT){setTimeout("equalActive('"+el+"',"+nh+","+ht+")",sp);} } //调用方法<body onload="equalColumns('subMainBox','m_content','sideBox')"> //subMainBox，m_content，sideBox就是你希望高度相等的div的id值
