关于前端:五种自适应三栏布局

3次阅读

共计 1789 个字符，预计需要花费 5 分钟才能阅读完成。

办法一：浮动

<!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>

正文完