CSS:三欄佈局之雙飛翼佈局

weixin_34185560發表於2018-05-02
CSS

1.雙飛翼佈局

（1）父元素包含左中右三個盒子，中間盒子要優先渲染，所以要將中間盒子寫在前面，且中間盒子要有一個子元素盒子；
（2）左中右三個盒子都設定左浮動；
（3）左邊盒子定寬，設定margin-left:-100%；
（4）右邊盒子定寬，設定margin-left:-右盒子寬度；
（5）中間盒子設定寬度為100%；
（6）中間盒子子盒子設定margin給轉左右盒子留位置；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body,html{
                width:100%;
                height: 100%;
            }
            .parent{
                height: 100%;
                overflow: hidden;/*清除浮動*/
            }
            .left{
                width:200px;
                height: 100%;
                background-color: chartreuse;
                float:left;
                margin-left:-100%;
            }
            .right{
                width:200px;
                height:100%;
                background-color: chartreuse;
                float:left;
                margin-left:-200px;
            }
            .center{
                width:100%;
                height:100%;
                float:left;
                background-color: forestgreen;
            }
            .center .main{
                margin:0 200px;
                
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="center">
                <div class="main">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

相關文章