為你總結老生常談的 --- 純CSS三列布局

哈羅，我這只菜鳥又來了。今天總結一下工作中經常用到的布局模式：三列布局。

其實不管是哪種布局都好，只要掌握好CSS，掌握好JS，做起來都不會一頭霧水。

當然啦，神一樣的布局需要神一般熟練的前端知識，努力一點奮斗一點，總有一天會超神。

最近看到院子里一位同學嚷嚷兩年內成為優秀的前端工程師，深深佩服其自信，小弟也得向他看齊。

好了吐槽完畢，送上干貨。

一、正文

布局前，通常需要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便偏移到屏幕的右側

 

4.滿屏三列布局(use position:absolute & relative)

html code:

    <div id="header">
        <p>The Header</p>
    </div>
    <div id="divContent">
        <div id="left">
            <p class="top">The Body Left</p>
        </div>
        <div class="content">
            <p>The body Center</p>
        </div>
        <div id="right">
            <p class="top">The body Right</p>
        </div>
    </div>
    <div class="divBottom">The  Bottom</div>

css code:

    /*利用相對定位和絕對定位進行三列布局*/
    #header 
    {
        height: 50px;
        background-color: #EAEAEA;
        border:1px solid #333;
        padding:4px;
        margin-top: 30px;
    }
    #divContent 
    {
        /*key code:相對定位后，其子元素均相對該元素進行定位*/
        position:relative;
        width:100%;
        /*設置width可以有多種值，視乎需求，這里設置100%的話就會自適應瀏覽器窗口大小*/
    }
    #left
    {
        position:absolute;  /*1.絕對定位，絕對定位后相對於static外的第一個父元素定位*/
        left:0;/*2.左列就寫left:0，這樣它就靠在最左邊，右列就如下方寫right:0，這樣它就靠在最右邊*/
        top:30px;
        width:200px;
        background:#eaeaea;
        border:1px solid #333;
    }
    .content 
    {
        position:relative; /*1.中間這塊並沒有使用絕對定位，而是用了相對定位,這樣它就相對於原位置定位了*/
        top: 30px;
        margin-left:220px;/*2.margin-left和margin-right的設置要視乎左列和右列的寬度*/
        margin-right:220px;
        margin-bottom:20px;
        background:#ffc;
        border:1px solid #333;
    }
    #right 
    {
        position:absolute;
        right:0;
        top: 30px;
        width:200px;
        background:#eaeaea;
        border:1px solid #333;
    }
    .divBottom 
    {
        background-color:#f1f1f1;
        border:1px solid #333;
        width:100%;
        position:absolute;
        bottom:0;
    }

key:熟練使用相對定位及絕對定位

 

二、總結

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

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

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

共勉。