五種自適應三欄佈局

時間 2020-10-26

標籤 html app 佈局 flex code htm table class 欄目 CSS 简体版

原文原文鏈接

方法一：浮動html

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

方法二：flexapp

<!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佈局flex

<!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佈局code

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。