雙飛翼佈局

時間 2019-12-18

標籤雙飛佈局简体版

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
    <!--淘寶雙飛翼佈局的佈局的好處是讓main裏面的內容先渲染-->
    <meta charset="UTF-8">
    <title>雙飛翼佈局</title>
    <style>
        .container {
            width: 100%;
        }
        .main {
            width: 100%;
            min-height: 30px;
            float: left;
            background: green;
        }
        .mainContentWrap{
            margin-left:20%;
            margin-right:20%;
        }
        .sub{
            width:20%;
            min-height:30px;
            background: blue;
            float: left;
            margin-left:-100%;
        }
        .extra{
            width:20%;
            min-height: 30px;
            background: red;
            float: right;
            margin-left:-100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main">
        <!--加入mainContentWrap是爲了防止main裏面的內容被sub和extra覆蓋-->
        <div class="mainContentWrap">
            這裏面是主要內容
        </div>
    </div>
    <div class="sub">這裏面是子內容</div>
    <div class="extra">這裏面是額外內容</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------