首頁 > web前端 > js教程 > 主體

六種css三欄佈局方法範例

小云云
發布: 2018-02-12 16:11:17
原創
1663 人瀏覽過

本文我們主要和大家分享六種css三欄佈局方法範例, 談到佈局,首先就要想到定位,當別人問我,css的position定位有哪些取值,分別表示什麼意思?呃.....抓頭.gif,是時候回歸本質,看定義了。

定位

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

  • static(預設):元素框正常產生。區塊級元素產生一個矩形框,作為文件流程的一部分;行內元素則會建立一個或多個行框,置於父級元素中。

  • relative:元素框相對於先前正常文件流程中的位置發生偏移,且原先的位置仍然被佔據。發生偏移的時候,可能會覆蓋其他元素。

  • absolute:元素框不再佔有文件位置,並且相對於包含區塊進行偏移(所謂包含區塊就是最近一級外層元素position不為static的元素)。

  • fixed:元素框不再佔有文件流位置,並且相對於視窗進行定位。

  • sticky:css3新增屬性值,黏性定位,相當於relative和fixed的混合。最初會被當作是relative,相對原來位置進行偏移;一旦超過一定的閾值,會被當成fixed定位,相對於視口定位。

三列佈局

三列佈局,其中一列寬度自適應,在PC端最常用之一,搞定了三列佈局,其他一樣的套路。

方式一:浮動佈局

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

<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>
登入後複製

方式二:定位佈局

缺點:請父級要有非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>
登入後複製

方式三:表格佈局

缺點:沒什麼缺點,恐懼table

<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>
登入後複製

方式四:flex彈性佈局

缺點:相容性

#
<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>
登入後複製

方式五:grid柵格佈局

缺點:相容性Firefox 52, Safari 10.1, Chrome 57, Opera 44

<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>
登入後複製

方式六:聖杯佈局

缺點:需要多加一層標籤,html順序不對,佔用了佈局框的margin屬性

<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 > p {
        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">
        <p>
            <h1>我是圣杯布局中间框</h1>
        </p>
    </article>
    <article class="left">
        <h1>我是圣杯布局左框</h1>
    </article>        
    <article class="right">
        <h1>我是圣杯布局右框</h1>
    </article>        
</section>
登入後複製

實作效果:

六種css三欄佈局方法範例

#相關推薦:

CSS的經典三欄佈局如何實現

高度已知,左右寬度固定,實現三欄佈局的5種方法

################################################################ #三欄佈局的用法總結######

以上是六種css三欄佈局方法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!