五种自适应三栏布局

方法一：浮动

<!DOCTYPE html>
<html>
    <head>
        <style>
            .left{
                float:left;
                width:200px;
                height: 400px;
                background: blue;
            }
            .right{
                float: right;
                width: 200px;
                height: 400px;
                background: red;;
            }
            .center{
                height: 400px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                左边
            </div>           
            <div class="right">
                右边
            </div>
            <div class="center">
                中间
            </div>
        </div>
    </body>
</html>

方法二：flex

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrapper{
                display: flex;
            }
            .left,.right{
                height: 400px;
                width: 200px;
            }
            .left{
                background: blue;
            }
            .right{
                background: red;
            }
            .center{
                flex:1;
                height: 400px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                左边
            </div>     
            <div class="center">
                中间
            </div>      
            <div class="right">
                右边
            </div>           
        </div>
    </body>
</html>

方法三：绝对布局

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrapper{
                position: relative;
            }
            .left,.right,.center{
                position: absolute;
                height: 400px;
            }
            .left{
                left:0;
                background: blue;
                width: 200px;
            }
            .right{
                right: 0;
                background: red;
                width: 200px;
            }
            .center{
                left: 200px;
                right: 200px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                左边
            </div>     
            <div class="center">
                中间
            </div>      
            <div class="right">
                右边
            </div>           
        </div>
    </body>
</html>

方法四：table布局

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrapper{
                display: table;
                width: 100%;
            }
            .left,.right,.center{
                display: table-cell;
                height: 400px;
            }
            .left{
                background: blue;
                width: 200px;
            }
            .right{
                background: red;
                width: 200px;
            }
            .center{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                左边
            </div>     
            <div class="center">
                中间
            </div>      
            <div class="right">
                右边
            </div>           
        </div>
    </body>
</html>

方法五：grid布局

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrapper{
                display: grid;
                width: 100%;
                grid-template-rows: 400px;
                grid-template-columns: 200px auto 200px;
            }
            .left{
                background: blue;
            }
            .right{
                background: red;
            }
            .center{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="left">
                左边
            </div>     
            <div class="center">
                中间
            </div>      
            <div class="right">
                右边
            </div>           
        </div>
    </body>
</html>

五种自适应三栏布局

哎呀呀

引用和评论

训练报错: forward() missing 1 required positional argument: ‘x’

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！