CSS总结——常见的两栏三栏布局
Posted Krystal_M
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS总结——常见的两栏三栏布局相关的知识，希望对你有一定的参考价值。
一、两栏布局 — 左栏固定宽度，右栏宽度自适应
1、 左浮动+margin
<div class=“left”></div>
<div class=“main”></div>
css: .left{width:200px;float:left;}
.main{margin-left:200px;}
ps: IE6中可能出现双margin的bug,可以通过display：inline来解决
2、 绝对定位 + margin-left (兼容性好)
<div class=“parent">
<div class=“left”></div>
<div class=“main”></div>
</div>
css: .parent{position:relative;}
.left{position:absolute;width:200px;}
.main{margin-left:200px;}
3、 左浮动 + 负margin
<div class=“main-box">
<div class=“main”></div>
</div>
<div class=“left”></div>
css: .main-box {float:left;width:100%;}
.main {margin-left:210px;}
.left{float:left;width:200px;margin-left:-100%;}
二、 三栏布局
1、 绝对定位法（左右两栏绝对定位，中间栏自适应）
<body>
<div id = “left”></div>
<div id = “main”></div>
<div id = “right”></div>
</boby>
css : html,body{margin:0;height:100%;}
#left,#right{position:absolute;top:0;width:200px;height:100%;}
#left{left:0;}
#right{right:0;}
#main{margin:0 210px;height:100%;}
2、 margin负值法
<body>
<div id = “main”>
<div id = “body”></div>
</div>
<div id = “left”></div>
<div id = “right”></div>
</boby>
css: html,body{margin:0;height:100%;}
#main{width:100%;height:100%;float:left;}
#main,#body{margin:0 210px; height:100%;}
#left;#right{width:200px;height:100%;float:left;}
#left{margin-left:-100%;}
#right{margin-right:-200px;}
3、 自身浮动法（左栏左浮动，右栏右浮动，主体放后面）
<body>
<div id = “left”></div>
<div id = “right”></div>
<div id = “main”></div>
</boby>
css: html,body{margin:0;height:100%;}
#main {height:100%;margin:0 210px;}
#left,#right {width:200px;height:100%;}
#left{float:left;}
#right{float:right;}
以上是关于CSS总结——常见的两栏三栏布局的主要内容，如果未能解决你的问题，请参考以下文章
《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应