純CSS三列布局

一、正文

布局前，通常需要reset CSS，小弟深深喜歡kissy reset，在這里也使用它。至於代碼就不附了，各位可以自己下載來參透參透。

1.三列等高布局

html code:

<div id="wrap">
    <div id="left">
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
    </div>
    <div id="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div id="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

css code:

#wrap
{
    width: 1000px;
    margin: 0 auto; /*key code:*/
    overflow: hidden;
}
#left, #center, #right
{
    /*key code:*/
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
#left
{
    background: #00FFFF;
    float: left;
    width: 250px;
}
#center
{
    background: #FF0000;
    float: left;
    width: 500px;
}
#right
{
    background: #00FF00;
    float: right;
    width: 250px;
}

key:采用overflow:hidden,正內邊距和負外邊距結合

2.三列滿屏布局(use display:inline-block)

html code:

<div class="sec">
    <div class="content">
        <div class="subMenuLeft">left</div>
        <div class="mainBoxCenter">center</div>
        <div class="infoRight">right</div>
    </div>
</div>

css code:

    
.sec div.content
{
    padding-left: 150px;
    padding-right: 300px;
}
.sec div.subMenuLeft, .sec div.mainBoxCenter, .sec div.infoRight
{
    display: inline-block;
    zoom: 1;
    display: inline; /*fix ie<8*/
}
.sec div.mainBoxCenter
{
    width: 100%;
    background: #00FFFF;
}
.sec div.subMenuLeft
{
    width: 150px;
    margin-left: -150px;
    background: #FF0000;
}
.sec div.infoRight
{
    width: 300px;
    margin-right: -300px;
    background: #00FF00;
}

key:使用display:inline-block，然后控制padding和margin 

explaination:

將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。

　　但在IE6.0以及IE7.0是使用了一個has layout的概念。使用display：inline-block僅僅觸發了塊狀元素的has layout屬性。而DIV本身就是塊狀元素，所以在IE<8.0 下依然會出現換行的情況。

　　解決方案：先將塊元素設置為內聯對象呈遞（設置屬性display:inline），然后觸發塊元素的layout去hack IE7.0-

　　div{display:inline-block;zoom:1;*display:inline;}

3.三列滿屏布局(use float & -margin)

html code:

<div class="thr">
    <div class="content">
        <div class="mainBoxCenter">center</div>
    </div>
    <div class="subMenuLeft">left</div>
    <div class="infoRight">right</div>
</div>

css code:

   
.thr div.content
{
    width: 100%;
    float: left;
}
.thr div.subMenuLeft, .thr div.infoRight
{
    float: left;
}
.thr div.subMenuLeft
{
    width: 150px;
    margin-left: -100%;
    background: #00FFFF;
}
.thr div.infoRight
{
    width: 200px;
    margin-left: -200px;
    background: #FF0000;
}
.thr div.mainBoxCenter
{
    margin-left: 150px;
    margin-right: 200px;
    background: #00FF00;
}

key:利用浮動，再通過負的margin-left值控制位置 

explaination:

1.設置三個div全部向左浮動

2.設置content的寬度為100%，充滿整行，此時left和right都被擠到下一行

3.設置left的margin-left:-100%;這樣left偏移到屏幕的最左方並消失

4.設置mainCenter的左外邊距以及右外邊距分別等於要顯示的left和right的寬度，相當於留出位置放置left和right，此時會看到left出現了

5.設置right的margin-left值為自身的寬度，這樣right便偏移到屏幕的右側

二、總結

以上布局均兼容所有主流瀏覽器，包括IE6+

文章內個人理解為原創，資料出自網絡，對此衷心表示感謝！

如果這篇文章對你的布局工作有幫助，煩請點一點推薦，求寫作動力！

共勉。

引用：http://www.cnblogs.com/stay-foolish/archive/2013/05/19/3080200.html