首页 > 代码库 > 负margin-双飞翼布局

负margin-双飞翼布局

2024-09-12 23:19:03   214人阅读

<!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-双飞翼布局


联系
我们