CSS - 圣杯布局

實例展示
圣杯布局
小結(jié)

固定寬度與自適應(yīng)布局的實現(xiàn)方法：

  1. 方法一：利用BFC特性

父元素設(shè)置 overflow: hidden; 屬性
固定寬度元素設(shè)置 margin-left left float position: relative;
自適應(yīng)元素設(shè)置 float width: 100%;

        .bd-lft {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
        }
        .bd-lft .aside {
            float: left;
            width: 200px;
            margin-left: -100%; /*= -100%*/
            position: relative;
            left: -210px; /* = -pararntNode.paddingLeft */
            _left: 0; /*IE6 hack*/
        }
        .bd-lft .main {
            float: left;
            width: 100%;
        }
  1. 方法二：position 定位

父元素設(shè)置 position: relative
固定寬度元素設(shè)置 position: absolute; left: 0; top: 0

        .bd-lft {
            zoom: 1;
            padding-left: 210px;
            position: relative;
        }
        .bd-lft .aside {
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .bd-lft .main {
            width: 100%;
        }
源碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            background-color: #ffffff;
            font-size: 14px;
        }
        #hd,
        #ft {
            padding: 20px 3px;
            background-color: #cccccc;
            text-align: center;
        }
        .bd-lft,
        .bd-rgt,
        .bd-3-lr,
        .bd-3-ll,
        .bd-3-rr {
            margin: 10px 0;
            min-width: 400px;
        }
        .main {
            background-color: #03a9f4;
            color: #ffffff;
        }
        .aside,
        .aside-1,
        .aside-2 {
            background-color: #00bcd4;
            color: #ffffff;
        }
        p {
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        /* 左側(cè)欄固定寬度，右側(cè)自適應(yīng) */
        .bd-lft {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
        }
        .bd-lft .aside {
            float: left;
            width: 200px;
            margin-left: -100%; /*= -100%*/
            position: relative;
            left: -210px; /* = -pararntNode.paddingLeft */
            _left: 0; /*IE6 hack*/
        }
        .bd-lft .main {
            float: left;
            width: 100%;
        }
        /* 右側(cè)欄固定寬度，左側(cè)自適應(yīng) */
        .bd-rgt {
            zoom: 1;
            overflow: hidden;
            padding-right: 210px;
        }
        .bd-rgt .aside {
            float: left;
            width: 200px;
            margin-left: -200px; /* = -this.width */
            position: relative;
            right: -210px; /* = -parantNode.paddingRight */
        }
        .bd-rgt .main {
            float: left;
            width: 100%;
        }
        /* 左中右 三欄自適應(yīng) */
        .bd-3-lr {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
            padding-right: 210px;
        }
        .bd-3-lr .main {
            float: left;
            width: 100%;
        }
        .bd-3-lr .aside-1 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -210px;
            _left: 210px; /*IE6 hack*/
        }
        .bd-3-lr .aside-2 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -210px;
        }
        /* 都在左邊，右側(cè)自適應(yīng) */
        .bd-3-ll {
            zoom: 1;
            overflow: hidden;
            padding-left: 420px;
        }
        .bd-3-ll .main {
            float: left;
            width: 100%;
        }
        .bd-3-ll .aside-1 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -420px;
            _left: 0px; /*IE6 hack*/
        }
        .bd-3-ll .aside-2 {
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -210px;
            _left: 210px; /*IE6 hack*/
        }
        /* 都在右邊，左側(cè)自適應(yīng) */
        .bd-3-rr {
            zoom: 1;
            overflow: hidden;
            padding-right: 420px;
        }
        .bd-3-rr .main {
            float: left;
            width: 100%;
        }
        .bd-3-rr .aside-1 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -210px;
        }
        .bd-3-rr .aside-2 {
            float: left;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -420px;
        }
    </style>

</head>
<body>
<div id="hd">頭部</div>
<div class="bd-lft">
    <div class="main">
        <p>主內(nèi)容欄自適應(yīng)寬度</p>
    </div>
    <div class="aside">
        <p>側(cè)邊欄固定寬度</p>
    </div>
</div>
<div class="bd-rgt">
    <div class="main">
        <p>主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度主內(nèi)容欄自適應(yīng)寬度</p>
    </div>
    <div class="aside">
        <p>側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度</p>
    </div>
</div>
<div class="bd-3-lr">
    <div class="main">
        <p>主內(nèi)容欄自適應(yīng)寬度</p>
    </div>
    <div class="aside-1">
        <p>側(cè)邊欄1固定寬度</p>
    </div>
    <div class="aside-2">
        <p>側(cè)邊欄2固定寬度</p>
    </div>
</div>
<div class="bd-3-ll">
    <div class="main">
        <p>主內(nèi)容欄自適應(yīng)寬度</p>
    </div>
    <div class="aside-1">
        <p>側(cè)邊欄1固定寬度</p>
    </div>
    <div class="aside-2">
        <p>側(cè)邊欄2固定寬度</p>
    </div>
</div>
<div class="bd-3-rr">
    <div class="main">
        <p>主內(nèi)容欄自適應(yīng)寬度</p>
    </div>
    <div class="aside-1">
        <p>側(cè)邊欄1固定寬度</p>
    </div>
    <div class="aside-2">
        <p>側(cè)邊欄2固定寬度</p>
    </div>
</div>
<div id="ft">底部</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,805評論 1贊 92
  • CSS 是什么 css(Cascading Style Sheets)，層疊樣式表，選擇器{屬性:值；屬性：值}h...
    崔敏嫣閱讀 1,509評論 0贊 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 27,712評論 1贊 45
  • 好高的氣溫啊，也不知道你怎么在過，我的孫女一定是好樣兒的！我的小寶貝會好好的！奶奶盼著你能回家，奶奶時刻都想你！
    寒江雪810閱讀 183評論 0贊 0
  • 于我而言，羊腸小道指曲折而極窄的路。清.李時珍《鏡花緣》第四十五回：“前面彎彎曲曲，盡是羊腸小道”。意思是...
    言午57閱讀 2,195評論 0贊 1