CSS实现三栏布局的四种方法示例

      (3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位

      (4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果

3. 双飞翼布局

HTML代码如下：

<div class="main">
<div class="inner">
Main
</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

CSS代码如下：

//CSS reset
body,html {
height:100%;
padding: 0;
margin: 0
}
body {
/*padding-left:100px;*/
/*padding-right:200px;*/
}
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
height: 100%;
/*position: relative;*/
/*left:-100px;*/
}
.main {
background: blue;
width: 100%;
float: left;
height: 100%;
}
.right {
background: red;
width: 200px;
float: left;
margin-left: -200px;
height: 100%;
/*position:relative;*/
/*right:-200px;*/
}
//新增inner元素
.inner {
margin-left: 100px;
margin-right: 200px;
}

圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，代码如上。增加多一个div就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

4. 浮动

HTML代码如下：

//注意元素次序
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>

CSS代码如下：

//CSS reset
body,html {
height:100%;
padding: 0;
margin: 0
}
//左栏左浮动
.left {
background: red;
width: 100px;
float: left;
height: 100%;
}
//中间自适应
.main {
background: blue;
height: 100%;
margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
background: red;
width: 200px;
float: right;
height: 100%;
}

这种方式代码足够简洁与高效，也容易理解

总结

以上就是这篇文章的全部内容了，四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流。