圣杯与双飞翼

对于三栏布局，左右侧固定宽度，右侧自适应，我们可以写出如下html

    

        
middle
        
left
        
right
    

双飞翼

对于双飞翼布局来说，我们需要在middle外侧添加一个div将其包裹起来，并将外部div，设置为width:100%。对middle添加左右外边距，代码如下：

    

        

            
middle
        
        
left
        
right
    

    .wrapper,.left,.right{
        float: left;
    }
    .wrapper{
        width: 100%;
        height: 500px;
    }
    .middle{
        height: 100%;
        background-color: pink;
        margin-left: 100px;
        margin-right: 100px;
    }
    .left{
        margin-left: -100%;
        width: 100px;
        height: 500px;
        background-color: yellow;
    }
    .right{
        margin-left: -100px;
        width: 100px;
        height: 500px;
        background-color: orange;
    }

可以实现如下效果

image.png

此处wrapper的宽度就是三栏的宽度总和。

圣杯

对于圣杯布局，需要将外侧的outer设置左右内边距100px。实现如下效果:

image.png

现在middle左侧和右侧都被遮挡住了，我们要让被遮挡的部分显示出来，于是给left和right设置一个相对位置，这件事圣杯布局，代码如下:

        
middle
        
left
        
right
    

    .outer{
        width: 900px;
        height: 500px;
        padding-left: 100px;
        padding-right: 100px;
    }
    .middle,.left,.right{
        float: left;
    }
    .middle{
        width: 100%;
        height: 500px;
        background-color: pink;
    }
    .left{
        position: relative;
        left: -100px;
        margin-left: -100%;
        width: 100px;
        height: 500px;
        background-color: yellow;
    }
    .right{
        position: relative;
        right: -100px;
        margin-left: -100px;
        width: 100px;
        height: 500px;
        background-color: orange;
    }

最终效果:

image.png