佈局篇之聖盃佈局

原創

2020-02-20 22:32

聖盃佈局的想法就是：外層盒子有中的子盒子都浮動起來，然後先把main固定住，利用margin留出一定空間，再將其他盒子利用marign:-xx%,以及position:relative(可能會用到)進行位置調整。

這裏先說一下兩列自適應的。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*兩欄自適應聖盃佈局*/
            .bd-lft{
                width:100%;
                height:700px;
                background:#CCCCCC;
                overflow:hidden;
            }
            .bd-lft .main{
                float:left;
                width:100%;
                margin-left:210px;
                height:100%;
                background: #ADFF2F;
            }
            .bd-lft .aside{
                float:left;
                background: #FF0000;
                margin-left:-100%;
                width:200px;
                height:100%;
                position:relative;
                right:210px;
            }
        </style>
    </head>
    <body>
        <div class="bd-lft">
            <div class="main"></div>
            <div class="aside"></div>
        </div>
    </body>
</html>

就是上面這個效果。綠色的是main，紅色的是aside。這裏因爲只用到了.main:”margin-left”屬性給asdie留出左側空間，使得width：100%的情況下在右側發生溢出，雖然容器overflow：hidden讓我們看不出來，但是asdie在margin:-100%時還是會把這個部分距離算進去，不用position:relative做調整時，它的效果是這樣的：

正好是壓在了main的左邊線。因此，我們使用position:relative
;right:210px進行調整，就可以了。在f12環境下使用手機模式也是ok的。

三欄自適應的佈局方式跟它類似。方式就是：先寫容器，所有內容float，先定main，留出margin的左右，再用負margin定位其他兩個從div。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*三欄自適應聖盃佈局*/
            .bd-lft{
                width:100%;
                height:700px;
                background:#CCCCCC;
                overflow:hidden;
            }
            .bd-lft .main{
                float:left;
                width:70%;
                margin-left:15%;
                margin-right:15%;
                height:100%;
                background: #ADFF2F;
            }
            .bd-lft .aside1{
                float:left;
                background: #FF0000;
                margin-left:-100%;
                width:15%;
                height:100%;
                /*position:relative;
                right:210px;*/
            }
            .bd-lft .aside2{
                float:left;
                background: #FF0000;
                margin-left:-15%;
                width:15%;
                height:100%;
                /*position:relative;
                right:210px;*/
            }
        </style>
    </head>
    <body>
        <div class="bd-lft">
            <div class="main"></div>
            <div class="aside1"></div>
            <div class="aside2"></div>
        </div>
    </body>
</html>