学习笔记（二）-CSDN博客

本文链接：https://blog.csdn.net/JJong0429/article/details/105869729

三栏布局

方法一：float（记得清除浮动）

<section class="layout float">
    <style>
        .layout.float .left{
            float: left;
            width: 300px;
            background-color: red;
        }
        .layout.float .center{
            background-color: pink;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background-color: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h2>第一种方法：float</h2>
        </div>
    </article>
</section>

方法二：absolute（不适合页面布局）

<section class="layout absolute">
    <style>
        .layout.absolute .left-center-right>div{
            position: absolute;
        }
        .layout.absolute .left{
            left: 0;
            width: 300px;
            background-color: blue;
        }
        .layout.absolute .center{
            left: 300px;
            right: 300px;
            background-color: pink;
        }
        .layout.absolute .right{
            right: 0;
            width: 300px;
            background-color: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>第二种方法：absolute</h2>
        </div>
        <div class="right"></div>
    </article>
</section>

方法三：flex（布局强但存在IE兼容性问题）

<section class="layout flexbox">
    <style>
        .layout.flexbox{
            margin-top: 200px;
        }
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left{
            width: 300px;
            background-color: red;
        }
        .layout.flexbox .center{
            flex: 1;
            background-color: pink;
        }
        .layout.flexbox .right{
            width: 300px;
            background-color: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>第三种方法：flex</h2>
        </div>
        <div class="right"></div>
    </article>
</section>

方法四：表格布局（使用方便，不存在兼容问题）

<section class="layout table">
    <style>
        .layout.table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right>div{
            display: table-cell;
        }
        .layout.table .left{
            width: 300px;
            background-color: blue;
        }
        .layout.table .center{
            background-color: pink;
        }
        .layout.table .right{
            width: 300px;
            background-color: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>第四种方法：表格布局</h2>
        </div>
        <div class="right"></div>
    </article>
</section>

方法五：网格布局（布局强大，兼容性差）

<section class="layout grid">
    <style>
        .layout.grid .left-center-right{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left{
            background-color: red;
        }
        .layout.grid .center{
            background-color: pink;
        }
        .layout.grid .right{
            background-color: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>第五种方法：网格布局</h2>
        </div>
        <div class="right"></div>
    </article>
</section>