那些年我會的三欄佈局

三欄佈局是很常見的佈局樣式，這裏介紹兩種三欄佈局的方法。

方法一：絕對定位法

     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>