负margin-双飞翼布局

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了负margin-双飞翼布局相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .sub{
            float: left;
            width: 190px;
            margin-left: -100%;
        }
        .main{
            float:left;
            width:100%;
        }
        .extra{
            float:left;
            width:230px;
            margin-left: -230px;
        }
        .main-wrap{
            margin:0 230px 0 190px;
        }
    </style>
</head>
<body>
    <div id="page">
        <div id="hd">Header</div>
        <div id="bd">
            <div class="main">
                <div class="main-wrap">
                    <p>Main</p>
                </div>
            </div>
            <div class="sub">
                <p>Sub</p>
            </div>
            <div class="extra">
                <p>Extra</p>
            </div>
        </div>
        <div id="fd">
            <p>footer</p>
        </div>
    </div>
</body>
</html>

优点，优先加载mian区域的内容，中间区域可根据屏幕尺寸变化自动伸缩，左右两栏则固定布局。

以上是关于负margin-双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章

圣杯和双飞翼布局

圣杯布局，双飞翼布局详解

经典面试题圣杯布局以及双飞翼布局原理

CSS看了C站CSDN源码，这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding

双飞翼布局的改造 box-sizing和margin负值的应用

CSS网页布局基础-圣杯布局和双飞翼布局