射雕的"双飞翼布局"

符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< style  type ="text/css" >
*
{ padding : 0 ; margin : 0 }
div.page
{ background : #efefef ; width : 950px ; margin : 0 auto ; }
div.main
{ width : 100% ; background : pink ; float : left }
div.sub
{ width : 230px ; float : left ; margin-left : -950px ; background : lightblue ; }
div.extra
{ width : 190px ; float : left ; margin-left : -190px ; background : lightgreen ; }
div.main .main_container
{ margin : 0 200px 0 240px ; background : #f6c }
</ style >
</ head >
< body >
< div  class ="page" >
    
< div  class ="main" >
        
< div  class ="main_container"   > main container < br /> asdfa </ div >
    
</ div >
    
< div  class ="sub" > sub columne </ div >
    
< div  class ="extra" > extra column </ div >     
</ div >
</ body >
</ html >

你可能感兴趣的:(布局)