[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css

首頁

web前端

html教學

[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来

转自：http://my.oschina.net/jsan/blog/368543

最终效果：

左侧栏固定宽度，右侧自适应

html:

<div class="bd-lft">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside">        <p>侧边栏固定宽度</p>    </div></div>

css:

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

右侧栏固定宽度，左侧自适应

html:

<div class="bd-rgt">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside">        <p>侧边栏固定宽度</p>    </div></div>

css:

.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%;    }

左中右三栏自适应

html:

<div class="bd-3-lr">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>    <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>    <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

css:

 .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;    }

都在左边，右侧自适应

html:

<div class="bd-3-ll">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>     <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

css:

.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*/}

都在右边，左侧自适应

html:

<div class="bd-3-rr">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>     <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

css:

.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;}

最终代码：

<!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;    }    /* 左侧栏固定宽度，右侧自适应 */        .bd-lft {        zoom: 1;        overflow: hidden;        padding-left: 210px;    }        .bd-lft .aside {        float: left;        width: 200px;        margin-left: -100%;        /*= -100%*/        position: relative;        left: -210px;        /* = -parantNode.paddingLeft */        _left: 0;        /*IE6 hack*/    }        .bd-lft .main {        float: left;        width: 100%;    }    /* 右侧栏固定宽度，左侧自适应 */        .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%;    }    /* 左中右 三栏自适应 */        .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;    }    /* 都在左边，右侧自适应 */        .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*/    }    /* 都在右边，左侧自适应 */        .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>主内容栏自适应宽度</p>        </div>        <div class="aside">            <p>侧边栏固定宽度</p>        </div>    </div>    <div class="bd-rgt">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside">            <p>侧边栏固定宽度</p>        </div>    </div>    <div class="bd-3-lr">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div class="bd-3-ll">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div class="bd-3-rr">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div id="ft">底部</div></body></html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。