圣杯布局与双飞翼布局的实现思路

原文地址：圣杯布局与双飞翼布局的实现思路 作者：ygtzz

出处：http://99jty.com/?p=432

 

圣杯布局与双飞翼布局的实现思路

 

圣杯布局

 

HTML代码：

 

  <divid="page">                           
        <divid="hd"></div>                           
    <divid="bd">                                     
            <divclass="main">main</div>                               
      <divclass="sub">sub</div>                                     
      <divclass="extra">extra</div>             
    </div>                   
    <divid="ft"></div>       
  </div>

 

css代码：

 

  <style type="text/css">
          .main{             
                    float:left;           
                    width: 100%;   
                    background:#39c;
                    height:300px;
            } 
        .sub{           
                    float:left;             
                    width:190px;             
                    margin-left: -100%;   
                    background:#f60;
                    height:300px;
                    position:relative;
                    left:-190px;
          }   
          .extra{             
                        float:left;             
                        width:230px;             
                        margin-left: -230px;
                        background:#666;
                        height:300px;
                        position:relative;
                        right:-230px;
          } 
          #bd{             
                  padding: 0 230px 0 190px;   
          }

    </style>

 

双飞翼布局：

 

完整代码：

 

< html lang = "en-US" >

 < head >

 < meta charset = "UTF-8" >

 < title > < / title >

  <style type ="text/css">

   .main {

      background : #D6D6D6 ;

   }

   .left {

      background : #E79F6D ;

   }

   .right {

      background : #7BD ;

   }

  

  .main {

   float : left ;

   width : 100% ;

  }

  .left {

   float : left ;

   width : 190px ;

   margin-left : -100% ;

  }

  .right {

   float : left ;

   width : 230px ;

   margin-left : -230px ;

  }

 .in { margin : 0 230px 0 190px }

 </style>

 < / head >

 < body >

  < div id = "bd" >

       < div class = "main" >

            < div class = "in" > test11111111111 < / div >

        < / div >

       < div class = "left" > test11111111111 < / div >

       < div class = "right" > test11111111111 < / div >

  < / div >

 < / body >

< / html >