三栏布局，这是一种相对比较常见的页面布局，这里提供2种实现方法：
方法1：
使用最新的css3伸缩盒布局属性，可轻松实现（三栏等高，默认就是三栏等高哟！）
| 代码如下 | |
| <style> .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color: #bbb;text-align: center;} .main{} .content{overflow: hidden;background-color: #a4e88c;} .left{width: 100px;background-color: #E79F6D;} .right{width: 100px;background-color: #7BD;} .left,.right,.content{min-height: 200px;_height: 200px;} /*伸缩盒布局*/ .flex-container{display: flex;} .content{flex:1;} .left{order:-1;} </style> <div class="header"> 页头100px </div> <div class="main flex-container"> <div class="content"> 中间自适应 </div> <div class="left"> 左边宽100px左边宽100px左边宽100px </div> <div class="right"> 右边宽150px </div> </div> <div class="footer"> 页脚100px </div> | |
提示：你可以先修改部分代码再运行。
方法2：（不考虑三栏加载顺序,中间栏不用额外加层）
主要运用的是触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局的，源码如下：
| 代码如下 | |
| <!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> </head> <body> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float: right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content: "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color: #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont{min-height: 300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;} /* 三列等高 */ .left{width: 150px;background-color: #f00;} .right{width: 150px;background-color: #008080;} .cont{overflow: hidden;background-color: #900;_zoom:1;} .footer{height: 100px;background-color: #0080FF;} </style> <div class="header"> 这是头部 </div> <div class="main"> <div class="left fl"> left </div> <div class="right fr"> right </div> <div class="cont"> cont <br /> 触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局：不考虑三栏加载顺序,中间栏不用额外加层 <br /> 防止.cont被隐藏：body{min-width:2x.left+.right} </div> </div> <div class="footer"> footer内容 </div> </body> </html> | |
提示：你可以先修改部分代码再运行。
方法3：（传说中的圣杯/双飞翼布局,中间自适应栏可优先加载）
主要运用的是浮动float 和margin的结合使用，源码如下：
| 代码如下 | |
| <!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> </head> <body> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float: right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content: "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color: #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont_inner{min-height: 300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;}/* 三列等高 */ .cont{width: 100%;} .cont_inner{margin-left: 150px;margin-right: 150px;background-color: #900;} .left{width: 150px;background-color: #f00;margin-left: -100%;} .right{width: 150px;background-color: #008080;margin-left: -150px;} .footer{height: 100px;background-color: #0080FF;} </style> <div class="header"> 这是头部 </div> <div class="main"> <div class="cont fl"> <div class="cont_inner"> cont </div> </div> <div class="left fl"> left </div> <div class="right fr"> right </div> </div> <div class="footer"> footer内容 </div> </body> </html> | |
提示：你可以先修改部分代码再运行。
从源代码上来看，要不讲究栏目加载顺序，方法1是比较简洁的；但要求自适应栏目优先加载，圣杯布局无疑是首选方案！
另外补充下，圣杯布局是比较灵活的一种布局方式：表现为不改动html结构，只调整css样式，即可实现各种布局，如用下面的任一代码替换上面方法2的对应部分即可实现不同布局：
.cont_inner{margin-right: 300px;background-color: #900;}
.left{width: 150px;background-color: #f00;margin-left: -300px;}
.right{width: 150px;float: left;background-color: #008080;margin-left:-150px;}
或
.cont_inner{margin-left: 300px;background-color: #900;}
.left{width: 150px;background-color: #f00;margin-left: -100%;}
.right{width: 150px;float: left;background-color: #008080;margin-left:-100%;position: relative;left: 150px;}
其它布局，请自行折腾组合 ^_^
发表评论