圣杯布局和双飞翼布局解析

最新推荐文章于 2022-03-21 22:52:55 发布

原创最新推荐文章于 2022-03-21 22:52:55 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#布局

前端专栏收录该内容

29 篇文章

订阅专栏

圣杯布局和双飞翼布局解决的问题是一样的，就是两边固定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：见代码后的解析

双飞翼布局还有个好处，让Main变成BFC元素了，屏幕宽度缩小Main也不会被挤下去，圣杯布局就会被挤下去。

代码

圣杯布局：

<div class="header">Header</div>
<div class="bd">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>


<style>
    body{padding:0;margin:0}
    .header,.footer{width:100%; background: #666; height:30px; clear:both;}

    .bd{
      /*关键2 为了不被左右挡住 但是加了之后左右栏也缩进来了*/
        padding-left:150px;
        padding-right:190px; 
    }
    .left{
        background: #E79F6D;
        width:150px;
        float:left;
        margin-left:-100%; /*关键1 挪上去 */
        position: relative;
        left:-150px;
       /*关键3  各自相对于自己把自己挪出去，得到最终结果*/

    }
    .main{
        background: #D6D6D6;
        /*中间部分需要根据浏览器宽度的变化而变化，所以要用100%*/
        width:100%;
        float:left;

    }
    .right{
        background: #77BBDD;
        width:190px;
        float:left;
        margin-left:-190px;/*关键1 挪上去*/
        position:relative;
        right:-190px;
        /*关键3 各自相对于自己把自己挪出去，得到最终结果 */
    }
</style>

解析：
1. left 和 right 分别设置 margin-left:-100%和 margin-left:-190px使左右挪上去；
2. 为了不被left 和 right 挡住，给.bd加上padding-left:150px;padding-right:190px;
3. 但是左右栏也缩进来了，于是采用相对定位方法，各自相对于自己把自己挪出去

双飞翼布局：

<div class="header">Header</div>
<div class="bd">
    <div class="main">
     /*关键1 加了一层div*/
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
<style>
        body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .bd{
             /*关键2 去掉*/
            /*padding-left:150px;*/
            /*padding-right:190px;*/
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            /*关键2 去掉*/
            /*position: relative;*/
            /*left:-150px;*/
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            /*关键2 去掉*/
            /*position:relative;*/
            /*right:-190px;*/
        }
        .inner{
        /*关键3*/
            margin-left:150px;
            margin-right:190px;
        }
    </style>