CSS佈局——三欄佈局

說到三欄佈局，不少都會提到聖盃佈局和雙飛翼佈局這兩個經典的三欄佈局方式。因而，我在網上搜了一些相關資料，閱讀並跟着代碼敲了一遍，發如今處理三欄佈局上，他們採用的都是兩邊欄固定，中間欄自適應的策略。在處理頁腳上，採用的是清除浮動方式。在處理邊欄的方式上也基本一致，惟一的不一樣是html結構以及處理中間欄的方式不同。如今試着用本身的語言來描述下這兩個佈局。

1、三欄佈局 ——Marchew

這個三欄佈局方式是在csdn看別人的聖盃佈局時推薦的連接裏的，聽說是聖盃佈局的原始形態，由外國人Marchew寫的。所以，該佈局在處理三欄佈局時跟聖盃佈局一模一樣，不過代碼比聖盃佈局簡單些，並且在處理IE6兼容上也作得很好。

CSS代碼：

/*** The Essential Code ***/

    body {
        min-width: 550px;         /* 2 x LC width + RC width */
    }

    #container {
        padding-left: 200px;      /* LC width */
        padding-right: 150px;     /* RC width */
    }
    
    #container .column {
        position: relative;
        float: left;
    }
    
    #center {
        width: 100%;
    }
    
    #left {
        width: 200px;             /* LC width */
        right: 200px;             /* LC width */
        margin-left: -100%;
    }
    
    #right {
        width: 150px;             /* RC width */
        margin-right: -100%;
    }
    
    #footer {
        clear: both;
    }
    
    /*** IE6 Fix ***/
    * html #left {
        left: 150px;              /* RC width */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

html代碼：

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

2、三欄佈局——聖盃佈局

聖盃佈局在處理中間塊自適應上採用的策略主要是，三欄採用相對定位,左右欄填補兩邊空白的方式進行佈局。在內容上，採用的是overflow:hidden，如有內容溢出，則直接隱藏。

CSS代碼：

/*聖盃佈局*/

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 420px;
}

.header,
.footer {
    border: 1px solid #333;
    background: #aaa;
    text-align: center;
}

.left,
.main,
.right {
    position: relative;
    min-height: 130px;
    float: left;
}

.container {
    border: 2px solid yellow;
    padding: 0 220px 0 200px;
    overflow: hidden;
}

.left {
    margin-left: -100%;
    width: 200px;
    background: red;
    left: -200px;
}

.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

.main {
    background: blue;
    width: 100%;
}

.footer {
    clear: both;
}

html代碼：

<div class="header">header</div>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>

3、三欄佈局——雙飛翼佈局

雙飛翼佈局在處理中間欄自適應上，採用過的策略是在主欄容器裏再放一個內容容器，經過設置內容容器的margin進行自適應的調節。

CSS代碼：

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 420px;
}

.header,
.footer {
    border: 1px solid #333;
    background: #aaa;
    text-align: center;
}

.left,
.main,
.right {
    float: left;
    min-height: 130px;
}

.container {
    border: 2px solid yellow;
    overflow: hidden;
}

.left {
    margin-left: -100%;
    width: 200px;
    background: red;
}

.right {
    margin-left: -220px;
    width: 220px;
    background: green;
}

.main {
    width: 100%;
    background: blue;
}

.content {
    margin: 0 220px 0 200px;
}

.footer {
    clear: both;
}

html代碼：

<div class="header">header</div>
<div class="container">
    <div class="main">
        <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>