css学习成果－双飞翼布局

本文链接：https://blog.csdn.net/cdkd123/article/details/51605737

今天学习了css的双飞翼布局效果，就是一种利用margin-left, left, position=relative,float=left属性，给web页面三个元素设置位置的布局。因为像一个大鸟的身体和两边的翅膀，故名“双飞翼”。它和“圣杯”效果有些关联，这里，我们只给出双飞翼效果的布局代码。

当给一个div设置margin-left值为－100%，float=left,且position＝relative时，这个div就会顶到上面去。所以，这里middle div在左边，但是left div被顶到和middle div平级的位置。再设置一下middle div内容inner的margin left，就可以看似middle div在中间了。这是一节总结课。可以参考极客学院的视屏。

http://www.jikexueyuan.com/course/981.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS + DIV</title>

    <style type="text/css">
        body{
            margin:0px;
        }

        .header{
            background: red;
            height:200px;
        }

        .content{
            height: 300px;
        }
        .left{
            background: yellow;
            height:50px;
            width: 150px;
            margin-left: -100%;
            float: left;
            padding-bottom: 250px;
            /*position: relative;*/
            /*left: -150px;*/
        }
        .middle{
            background: orange;
            /*height:50px;*/
            width: 100%;
            float: left;
        }
        .right{
            background: turquoise;
            height:50px;
            width: 200px;
            float: left;
            margin-left: -200px;
            padding-bottom: 250px;
            /*position: relative;*/
            /*right: -200px;*/

        }
        .footer{
            background: deepskyblue;
            height:200px;
        }

        .inner{
            margin-left: 150px;
        }
    </style>
</head>
<body>


    <div class="header" >
        我是头部
    </div>

    <div class="content">
        <div class="middle">

            <div class="inner">
                我是中间
            <p>
                hello,world!
            </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p> <p>
            hello,world!
        </p>
        </div>
        </div>
        <div class="left">
            我是左边

        </div>
        <div class="right">
            我是右边
        </div>
    </div>
    <div class="footer">
        我是尾部
    </div>
</body>
</html>

效果如下：