其他分享
首页 > 其他分享> > 搞定css三栏布局(六种方法)

搞定css三栏布局(六种方法)

作者:互联网

谈到布局,首先就要想到定位,当别人问我,css的position定位有哪些取值,分别表示什么意思?呃.....抓头.gif,是时候回归本质,看定义了。

1. 定位

1.1 position

position有六个属性值:static、relative、absolute、fixed、sticky和inherit。

2. 三列布局

三列布局,其中一列宽度自适应,在PC端最常用之一,搞定了三列布局,其他一样的套路。

2.1 方式一:浮动布局

缺点: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>

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 方式三:表格布局

缺点:没什么缺点,恐惧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>

2.4 方式四: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>

2.5 方式五: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>

2.6 方式六:圣杯布局

缺点:需要多加一层标签,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 > 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>

3. 实现效果:

实现效果图

标签:搞定,layout,background,color,tree,300px,css,三栏,columns
来源: https://www.cnblogs.com/10yearsmanong/p/13052237.html