三栏布局之绝对定位法：

迷南。 2022-04-02 11:46 276阅读 0赞

实现三栏布局有6种方法：

> 1.绝对定位法  
> 2.圣杯布局  
> 3.双飞翼布局  
> 4.自身浮动法  
> 5.flex布局  
> 6.table布局

这里的绝对定位分两种：一种是左右中三部分都进行绝对定位，中间部分通过left和right来进行定位。另一种是**左右**部分进行绝对定位，中间宽度自适应。但这两种方法的html结构是不一样的。

中左右：绝对定位

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-绝对定位法(一)</title>
        <style>
            .middle,.left,.right{
                position: absolute;
            }
            .left{
                left:0px;
                width:200px;
                background-color: red;
            }
            .middle{
                left:200px;
                right:300px;
                background-color: orange;
            }
            .right{
                right:0px;
                width:300px;
                background-color: blue
            }
        </style>
    </head>
    <body>
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
    </html>

左右中：左右绝对定位，中间使用margin-left/right来定位

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-绝对定位法(二)</title>
        <style>
            .left,.right{
                position: absolute;
            }
            .left{
                left:0px;
                width:200px;
                background-color: red;
            }
            .middle{
                margin-left: 200px;
                margin-right: 300px;
                background-color: orange;
            }
            .right{
                right:0px;
                width:300px;
                background-color: blue
            }
        </style>
    </head>
    <body>
        
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </body>
    </html>