关于html:圣杯布局与双飞翼布局

1次阅读

共计 2197 个字符，预计需要花费 6 分钟才能阅读完成。

圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，两头宽度自适应的三栏布局。(两头先加载渲染)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="圣杯布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> 圣杯布局 </title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        padding: 0;
        margin: 0;
    }

    body {min-width: 550px;}

    * {
        margin: 0;
        padding: 0;
    }

    .header,
    .footer {
        background: gray;
        width: 100%;
    }

    .footer {clear: both;}

    .main {
        height: 200px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }

    .left,
    .center,
    .right {float: left;}

    .center {
        width: 100%;
        height: 200px;
        background: red;
    }

    .left {
        width: 200px;
        height: 200px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        width: 150px;
        height: 200px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
        }
</style>

<body>
    <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center"> 两头两头两头两头两头两头两头后 </div>
        <div class="left"> 右边 </div>
        <div class="right"> 左边 </div>
    </div>
    <div class="footer">
        底部
    </div>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="双飞翼布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> 双飞翼布局 </title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .main>div {float: left;}

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

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

    .middle {
        width: 100%;
        background: yellow;

    }

    .content {
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
<body>
    <div class="main">
        <div class="middle">
            <div class="content">
                两头
            </div>
        </div>
        <div class="left">
            右边
        </div>
        <div class="right">
            左边
        </div>
    </div>
</body>
</html>