聖盃佈局和雙飛翼佈局

時間 2019-11-16

標籤佈局雙飛简体版

原文原文鏈接

1、描述：聖盃佈局與雙飛翼佈局針對的都是三列，左右欄固定，中間欄部分自適應的網頁佈局

2、聖盃佈局

①html代碼中middle部分首先要放在container的最前部分，而後是left,rightcss

②將三者都 float:left , 再加上一個position:relative (由於相對定位後面會用到）html

③middle部分 width:100%佔滿佈局

④此時middle佔滿了，因此要把left拉到最左邊，使用margin-left:-100%ui

⑤這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，因此在外圍container加上 padding:0 220px 0 200pxspa

⑥.middle內容拉回來了，但left也跟着過來了，因此要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220pxscala

⑦到這裏大概就自適應好了。若是想container高度保持一致能夠給left middle right都加上min-height:130pxcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聖盃佈局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 700px;
        }
        .left,.right,.middle{
            min-height: 130px;
            float: left;
            position: relative;
        }
        .left{
            background: green;
            width: 200px;
            margin-left: -100%;
            left: -200px;
        }
        .middle{
            background: blue;
            width: 100%;
        }
        .right{
            background: red;
            width: 300px;
            margin-left: -300px;
            right: -300px;
        }
        .container{
            padding: 0 300px 0 200px;
        }
    </style>
</head>
<body>
    <div class="container"> 
        　　<div class="middle">middle</div> 
        　　<div class="left">left</div> 
        　　<div class="right">right</div> 
    </div>
</body>
</html>

3、雙飛翼佈局

①main當作是鳥的身體，sub和extra則是鳥的翅膀，左翅sub有200px,右翅extra..220px.. 身體main自適應未知htm

②html代碼中，main要放最前邊，sub extra放在後面blog

③將main sub extra 都float:leftit

④將main佔滿 width:100%

⑤此時main佔滿了，因此要把sub拉到最左邊，使用margin-left:-100% 同理 extra使用margin-left:-220px

⑥main內容被覆蓋了吧，除了使用外圍的padding，還能夠考慮使用margin。給main增長一個內層div-- main-inner, 而後margin:0 220px 0 200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雙飛翼佈局</title>
    <style type="text/css">
        *{
            margin: 0;padding: 0;
        }
        body{
            min-width: 700px;
        }
        .sub,.main,.extra{ 
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background: red;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background: blue;
        }
        .main{ 
            width: 100%;
        }
        .main-inner{ 
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: green;
            word-break: break-all;
        }
        .footer{ 
            clear: both;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="main-inner"></div>
    </div> 
    <div class="sub"></div>
    <div class="extra"></div>
</body>
</html>

相關標籤/搜索

每日一句

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