您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/6/27 11:10:00 点击：

　　核心提示：!DOCTYPE htmlhtml lang=strongen/strongheadmeta charset=strongUTF-8/strongtitle双飞翼布局（用于管理系统，淘宝在用，低版本浏...

<!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 p{
            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>
<p class=<strong>"main"</strong>>
    <p class=<strong>"center"</strong>>
        <p class=<strong>"content"</strong>>中</p>
    </p>
    <p class=<strong>"left"</strong>>左</p>
    <p class=<strong>"right"</strong>>右</p>
</p>
</body>
</html>