搞定css三欄佈局（六種方法）

時間 2019-11-15

標籤搞定 css 佈局方法欄目 CSS 简体版

原文原文鏈接

談到佈局，首先就要想到定位，當別人問我，css的position定位有哪些取值，分別表示什麼意思？呃.....抓頭.gif，是時候迴歸本質，看定義了。

1. 定位

1.1 position

position有六個屬性值：static、relative、absolute、fixed、sticky和inherit。css

static（默認）：元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分；行內元素則會建立一個或多個行框，置於父級元素中。
relative：元素框相對於以前正常文檔流中的位置發生偏移，而且原先的位置仍然被佔據。發生偏移的時候，可能會覆蓋其餘元素。
absolute：元素框再也不佔有文檔位置，而且相對於包含塊進行偏移（所謂包含塊就是最近一級外層元素position不爲static的元素）。
fixed：元素框再也不佔有文檔流位置，而且相對於視窗進行定位。
sticky：css3新增屬性值，粘性定位，至關於relative和fixed的混合。最初會被看成是relative，相對原來位置進行偏移；一旦超過必定的閾值，會被當成fixed定位，相對於視口定位。

2. 三列布局

三列布局，其中一列寬度自適應，在PC端最經常使用之一，搞定了三列布局，其餘同樣的套路。html

2.1 方式一：浮動佈局

缺點：html結構不正確,當包含區域寬度小於左右框之和，右邊框會被擠下來css3

<style>
    .tree-columns-layout.float .left {
        float: left;
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.float .right {
        float: right;
        width: 300px;
        background-color: #0aa;
    }

    .tree-columns-layout.float .center {
        /* left: 300px;
        right: 300px; */
        margin: 0 300px;
        background-color: #aa0;
        overflow: auto;
    }
</style>
<section class="tree-columns-layout float">
    <article class="left">
        <h1>我是浮動佈局左框</h1>
    </article>
    <article class="right">
        <h1>我是浮動佈局右框</h1>            
    </article>
    <article class="center">
        <h1>我是浮動佈局中間框</h1>            
    </article>
</section>

2.2 方式二：定位佈局

缺點：要求父級要有非static定位，若是沒有，左右框容易偏移出去佈局

<style>
    .tree-columns-layout.position {
        position: relative;
    }

    .tree-columns-layout.position .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.position .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        background-color: #0aa;
    }

    .tree-columns-layout.position .center {
        margin: 0 300px;
        background-color: #aa0;
        overflow: auto;
    }
</style>
<section class="tree-columns-layout position">
    <article class="left">
        <h1>我是浮動定位左框</h1>
    </article>
    <article class="center">
        <h1>我是浮動定位中間框</h1>
    </article>
    <article class="right">
        <h1>我是浮動定位右框</h1>
    </article>        
</section>

2.3 方式三：表格佈局

缺點：沒什麼缺點，恐懼tableflex

<style>
    .tree-columns-layout.table {
        display: table;
        width: 100%;
    }

    .tree-columns-layout.table > article {
        display: table-cell;
    }

    .tree-columns-layout.table .left {            
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.table .center {
        background-color: #aa0;
    }

    .tree-columns-layout.table .right {
        width: 300px;
        background-color: #0aa;
    }   
    
</style>
<section class="tree-columns-layout table">
    <article class="left">
        <h1>我是表格佈局左框</h1>
    </article>
    <article class="center">
        <h1>我是表格佈局中間框</h1>
    </article>
    <article class="right">
        <h1>我是表格佈局右框</h1>
    </article>
</section>

2.4 方式四：flex彈性佈局

缺點：兼容性spa

<style>
    .tree-columns-layout.flex {
        display: flex;
    }    
    
    .tree-columns-layout.flex .left {
        width: 300px;
        flex-shrink: 0; /* 不縮小 */
        background-color: #a00;
    }

    .tree-columns-layout.flex .center {
        flex-grow: 1; /* 增大 */
        background-color: #aa0;
    }

    .tree-columns-layout.flex .right {
        flex-shrink: 0; /* 不縮小 */
        width: 300px;
        background-color: #0aa;
    }
</style>
<section class="tree-columns-layout flex">
    <article class="left">
        <h1>我是flex彈性佈局左框</h1>
    </article>
    <article class="center">
        <h1>我是flex彈性佈局中間框</h1>
    </article>
    <article class="right">
        <h1>我是flex彈性佈局右框</h1>
    </article>
</section>

2.5 方式五：grid柵格佈局

缺點：兼容性 Firefox 52, Safari 10.1, Chrome 57, Opera 44code

<style>
    .tree-columns-layout.grid {
        display: grid;
        grid-template-columns: 300px 1fr 300px;
    }

    .tree-columns-layout.grid .left {
        background-color: #a00;
    }

    .tree-columns-layout.grid .center {
        background-color: #aa0;
    }

    .tree-columns-layout.grid .right {
        background-color: #0aa;
    }
</style>
<section class="tree-columns-layout grid">
    <article class="left">
        <h1>我是grid柵格佈局左框</h1>
    </article>
    <article class="center">
        <h1>我是grid柵格佈局中間框</h1>
    </article>
    <article class="right">
        <h1>我是grid柵格佈局右框</h1>
    </article>
</section>

2.6 方式六：聖盃佈局

缺點：須要多加一層標籤，html順序不對，佔用了佈局框的margin屬性htm

<style>       
    .tree-columns-layout.cup:after {
        clear: both;
        content: "";
        display: table;
    }

    .tree-columns-layout.cup .center {
        width: 100%;
        float: left;            
    }

    .tree-columns-layout.cup .center > div {
        margin: 0 300px;
        overflow: auto;
        background-color: #aa0;
    }

    .tree-columns-layout.cup .left {
        width: 300px;
        float: left;
        margin-left: -100%;
        background-color: #a00;
    }

    .tree-columns-layout.cup .right {
        width: 300px;
        float: left;
        margin-left: -300px;
        background-color: #0aa;
    }
</style>
<section class="tree-columns-layout cup">
    <article class="center">
        <div>
            <h1>我是聖盃佈局中間框</h1>
        </div>
    </article>
    <article class="left">
        <h1>我是聖盃佈局左框</h1>
    </article>        
    <article class="right">
        <h1>我是聖盃佈局右框</h1>
    </article>        
</section>