不用CSS3的弹性盒模型实现双飞翼布局

17-06-27 来源：[db:作者]
收藏我要投稿
<!DOCTYPE html>
<html lang=<strong>"en"</strong>>
<head>
    <meta charset=<strong>"UTF-8"</strong>>
    <title>双飞翼布局（用于管理系统，淘宝在用，低版本浏览器）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 400<strong>px</strong>;
            color: #fff;
        }
        .main div{
            float: <strong>left</strong>;
            height: 600<strong>px</strong>;
            background: #eee;
        }
        .main .center{
            width: 100%;
            background: <strong>green</strong>;
        }
        .main .content{
            width: 100%;
            padding: 0 250<strong>px</strong>;
        }
        .main .left{
            width: 250<strong>px</strong>;
            background: <strong>blue</strong>;
            position: <strong>relative</strong>;
            margin-left: -100%;
        }
        .main .right{
            width: 250<strong>px</strong>;
            background: <strong>red</strong>;
            position: <strong>relative</strong>;
            margin-left: -250<strong>px</strong>;
        }
    </style>
</head>
<body>
<div class=<strong>"main"</strong>>
    <div class=<strong>"center"</strong>>
        <div class=<strong>"content"</strong>>中</div>
    </div>
    <div class=<strong>"left"</strong>>左</div>
    <div class=<strong>"right"</strong>>右</div>
</div>
</body>
</html>
点击复制链接与好友分享!回本站首页