那些年我会的三栏布局

三栏布局是很常见的布局样式，这里介绍两种三栏布局的方法。

方法一：绝对定位法

     1. 左右两栏采用绝对定位，分别固定于页面的左右两侧；

     2.中间的主体栏用margin-left和margin-right为左右两栏留下空间；

     demo戳这里：三栏布局之绝对定位法

.left-side
{
width:300px;
height:100%;
position:absolute;
left:0;
top:0;
}
.right-side
{
width:300px;
height:100%;
background-color:#ace6fd;
position:absolute;
right:0;
top:0;
}
.main
{
height:100%;
background-color:pink;
margin:0 300px;
}

<div class="left-side"></div>
<div class="main"></div>
<div class="right-side"></div>

 

方法二：浮动大法加负margin

　　1.中间的主体要使用双层div。外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右210像素的margin值。

       2.左栏与右栏都是采用margin负值定位的。左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；

       3.右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

        demo戳这里：三栏布局之浮动

      对left和right使用负margin之前的布局：

       使left的margin-left：-100%，right的margi-left：-300px（注：right的宽度为300px）之后的布局：

.container
{
width:100%;
height:100%;
float:left;
}
.main
{
height:100%;
background-color:#6bc8fe;
margin:0 300px;
}
.left-side
{
width:300px;
height:100%;
background-color:#ace6fd;
float:left;
margin-left:-100%;
}
.right-side
{
width:300px;
height:100%;
background-color:#ace6fd;
float:left;
margin-left:-300px;
}

<div class="container">
<div class="main"></div>
</div>
<div class="left-side"></div>
<div class="right-side"></div>