三栏布局之---圣杯布局、双飞翼布局、flex布局以及绝对定位布局

圣杯布局

    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        .footer,.header{
            border: 1px solid blue;
            background: red;
            text-align: center;
        }

        .container{
            padding: 0 100px 0 200px;
            overflow: hidden;
        }

        .middle,.left,.right{
            position: relative;
            float: left;
            min-height: 200px;
        }

        .middle{
                width: 100%;
            background: blue;
        }

        .left{
            margin-left: -100%;
            background: red;
            width: 200px;
            left: -200px;

        }

        .right{
            margin-left:-100px;
            background: purple;
            width: 100px;
            right: -100px
        }

        .footer{
           clear: both;
       }

    </style>

<body><div class="header">
    <h4>header</h4>
</div>
    

    <div class="container">
    <div class="middle"> <p>AAAAAA
        </p></div>
    <div class="left"> <p>BBBBBB
        </p></div>
    <div class="right"><p>CCCCCC
        </p></div>
    </div>
   

    <div class="footer"><h4>footer</h4></div>
    

</body>

出来的结果是这样的

双飞翼布局

<style type="text/css">
       *{
           margin:0;
           padding: 0;
       }
       .footer,.header{
           border: 1px solid blue;
           background: gray;
           text-align: center;
       }

       .content{
           margin: 0 200px 0 100px;
       }

       .middle,.left,.right{
        min-height: 100px;
        position: relative;
        float: left;
       }

       .middle{
           width: 100%;
           background: red;
       }

       .left{
           background: blue;
           width: 100px;
           margin-left: -100%;
       }

       .right{
           margin-left: -200px;
           background: green;
           width: 200px;
       }

       .footer{
           clear: both;
       }

       
   </style>

<body><div class="header">
    <h4>header</h4>
</div>
    

    <div class="container">

    <div class="middle"><div class="content"><p>AAAAAA</p></div>
    </div>

    <div class="left"> <p>BBBBBB</p>
    </div>

    <div class="right"><p>CCCCCC</p>
    </div>

    </div>
   

    <div class="footer"><h4>footer</h4></div>
    

</body>

flex布局

<style type="text/css">
        *{
            margin:0;
            padding: 0;
        }

        .footer,.header{
            border: 1px solid blue;
            background: gray;
            text-align: center;
        }

        .container{
            display: flex;
            min-height: 100px;  
        }

        .middle{
            flex-grow: 1;
            background: blue;   
        }

        .left{
            order: -1;
            background: red;
            flex-basis: 200px;  
        }

        .right{
            background: purple;
            flex-basis: 300px
        }   


        .footer{
            clear: both;
        }
  </style>

绝对定位

    <style>
        .left,
        .right,
        .middle {
            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>


<body>
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>

</body>

归来仍是少年

最后编辑于：2019.12.26 22:19:21