代码改变世界

圣杯布局

2015-03-28 17:15  bgstyle  阅读(116)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
      
    #header{ 
        width: 100%; 
        text-align: center; 
        height: 100px;
        background-color: blue;  
    }  
    #container{
        
        padding-left: 200px;
        padding-right: 150px;


    }


    #container .column{
        float: left;
        position: relative;
    }
    #center{
        background-color: yellow;
        width: 100%;
        height: 200px;
        
    }
    #left{
        background-color: red;
        width: 200px;
        margin-left:-100%;
        right: 200px;
        
   
        height: 200px;
    }
    #right{
        background-color: green;
        width: 150px;
        margin-right: -150px;
        height: 200px;

    }
    #footer{
        clear: both;
        height: 100px;
        background-color: black;
    }
    /*
    带有padding的圣杯布局，假设left层的左右padding为x，center层的padding为y，right层的padding为z.
    left的宽度为X，right的宽度为Y。
    复制代码
    body {
      min-width: 2(2x+X+2y)+(2z+Y)px;      
    }
    #container {
      padding-left: (2x+X)px;   
      padding-right: (2z+Y+2y)px; 
    }
    #container .column {
      position: relative;
      float: left;
    }
    #center {
      padding: 0 ypx;    
      width: 100%;
    }
    #left {
      width: Xpx;          
      padding: 0 xpx;      
      right: (X+2x+y)px;         
      margin-left: -100%;
    }
    #right {
      width: Ypx;         
      padding: 0 zpx;      
      margin-right:(Y+2z+y)px;  
    }
    #footer {
      clear: both;
    }

    IE Fix 
    * html #left {
      left: (2z+Y)px;         
    }*/
</style>
<body>
    <div id="header">head</div>

    <div id="container">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>

    </div>

    <div id="footer">footer</div>
</body>
</html>