圣杯，双飞翼，和自己的一种方法

圣杯布局和双飞翼布局

两边固定宽度，中间内容自适应宽度，是这两个布局的主要作用

这两个布局方式的关键就是利用 负的margin值来进行float元素的定位

其实这两个布局网上的博文介绍的很多，但是我自己研究以后，自己写了一种方式。

下面先写出两种流行的方式，最后在贴出我自己想出的代码，并且回合前两种传统方式进行比较。

先贴出html的结构

圣杯布局

html

header

  
main
  
left
  
right

Footer

css

.main{
    float:left;
     /*主要内容响应式设计*/
    width:100%;
    background:red;      
}

.left{
    float:left;
    width:200px;
    background:gray;
}

.right{
    float:left;
    width:200px;
    background:yellow;
}
.footer{
    clear:both;
}

我们可以看到，三块内容因为长度原因，left和right被挤下了下一行，

1利用负margin值进行定位。

分别给left和right添加css属性

.left{
    margin-left:100%;
}

.right{
    margin-left:-200px;
}

sdf

可以看到left和right的位置已经正确，分别在两侧，但是main的内容被left遮住了

2下一步我们将解决main元素位置问题。

.container{
    padding:0 200px 0 200px; 
}

main元素已经在自己应该在的位置了，但是left和right也跟着被带离了正确位置

3也是最后一步，就是将left，和right重新带到正确位置。

.left{
    position:relative;
    left:-200px;
}

.right{
    position:relative;
    right:-200px;
}

完成

成功完成，这是我自己看完教程以后，自己写了一遍。

双飞翼布局

双飞翼布局在看完后感觉很巧妙，他利用内层元素margin属性，撑开了main元素的宽度
，便于布局left和right的位置，并且避免三者互相遮罩内容

不废话直接上代码

    
header
    

    

        
main
    
    
left
    
right
    
    
Footer
  

.main{
    float:left;
     /*主要内容响应式设计*/
    width:100%;
    background:red;
}

.main-iner{
    margin:0 200px;
}
.left{
    float:left;
    width:200px;
    background:gray;
    margin-left:-100%;
  
}

.right{
    float:left;
    width:200px;
    background:yellow;
    margin-left:-200px;

}
.footer{
    clear:both;
}

我自己对于这种布局的一种办法：

我的方法是利用padding属性，这样main就可以空出left和right的位置，但是padding会影响main的宽度，使得main的宽度是大于 100% 的
但是css中有设置box大小的一个属性 box-sizing 可以设置成

box-sizing:border-box;

这样就一举两得，完美绝了问题，既没有使用圣杯中的相对定位，也没有像双飞翼那样
增加DOM元素。

但是世界上没有完美的东西。 IE8及以上才支持此属性，也就是说IE低版本无法使用此方法。

html

header
    

    

        main
    
    
left
    
right
    
    
Footer

css

.main{
    float:left;
     /*主要内容响应式设计*/
    width:100%;
    background:red;
    padding:0 200px;
    box-sizing:border-box;
}


.left{
    float:left;
    width:200px;
    background:gray;
    margin-left:-100%;
  
}

.right{
    float:left;
    width:200px;
    background:yellow;
    margin-left:-200px;

}
.footer{
    clear:both;
}

本文是我写了一个多小时的成果吧，小白一枚，有何过错请多指教，

双飞翼和圣杯布局的代码是我看了 此博文后默写出来的，
但是第三种方案是我完全自创，如有雷同，纯属巧合。

转载请注明出处谢谢