圣杯布局和双飞翼布局

无论是双飞翼布局还是圣杯布局，都是从下列的两个需要而产生的：

1.（基石）"center"元素必须是页面加载的第一个元素，不能放在其他的元素之后，以便加载的时候最先看到。因此，淘汰掉了浮动的方法。这个是两种布局产生的基础。

2.缩小页面的时候，“center”部分能够自适应，不会出现页面缩小了，内容也缺少了的现象。（center不需要设置高度，否则“自适应”成为空谈。）

双飞翼布局是圣杯布局的升级版本：可以不用写min-width防止网页界面缩小后变形，相对于圣杯布局，双飞翼布局CSS代码中少了给左右两侧栏定位的相关代码。但因此会要求在H5的.center结构中在增加一个.center_in.

 

圣杯布局的HTML结构：

<div class="container">
    <div  class="center">需要你写点东西，要不然页面显示不出来。</div>
    <div  class="left"></div>
    <div class="right"></div>
</div>

圣杯布局的css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left  {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: -100%;
            position: relative;
            left:-200px;
        }
        .right  {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        .center{
            width: 100%;
            //height: 200px;
            background-color:#00b0e0;
            float: left;
        }
        .container{
            min-width:400px;//需要设置最小宽度，防止一直缩小后变形。
            padding: 0 200px;
            background-color: #777777;
            /*float: left;*/
        }

    </style>

双飞翼布局HTML结构：

<div class="container">
    <div class="center">
        <div class="center_in">写点东西，要不然显示不了。</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局的CSS：

   <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -200px;
        }
        .center{
            //height: 200px;
            width: 100%;
            background-color: mediumpurple;
            /*padding-left: 200px;*/
            /*padding-right: 200px;*/
            float: left;
        }
        .center .center_in{
            margin-right: 200px;
            margin-left: 200px;
            width: 100%;
            background-color: yellow;
        }
    </style>