DIV+CSS网页布局之：三列布局-彼岸时光

1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

  1     DOCTYPE html  > 
  2     html  > 
  3     head  > 
  4         meta   charset  ="UTF-8"  > 
  5         title  > 三列布局   title  > 
  6     style  > 
  7   *  {  margin  :  0  ;  padding  :  0  ;  } 
  8   #herder  { 
  9       height  :  50px  ; 
 10       background  :  blue  ; 
 11   } 
 12   #main  { 
 13       width  :  100%  ; 
 14       overflow  :  hidden  ; 
 15   } 
 16   #main .main-left  { 
 17       width  :  25%  ; 
 18       height  :  800px  ; 
 19       background  :  red  ; 
 20       float  :  left  ; 
 21   } 
 22   #main .main-center  { 
 23       width  :  50%  ; 
 24       height  :  800px  ; 
 25       background  :  lightgreen  ; 
 26       float  :  left  ; 
 27   } 
 28   #main .main-right  { 
 29       width  :  25%  ; 
 30       height  :  800px  ; 
 31       background  :  pink  ; 
 32       float  :  right  ; 
 33   } 
 34   #footer  { 
 35       height  :  50px  ; 
 36       background  :  gray  ; 
 37   } 
 38     style  > 
 39     head  > 
 40     body  > 
 41     div   id  ="herder"  > 页头   div  > 
 42     div   id  ="main"  > 
 43         div   class  ="main-left"  > 左列   div  > 
 44         div   class  ="main-center"  > 中间   div  > 
 45         div   class  ="main-right"  > 右列   div  > 
 46     div  > 
 47     div   id  ="footer"  > 页脚   div  > 
 48     body  > 
 49     html  >  

查看更多关于DIV+CSS网页布局之：三列布局-彼岸时光的详细内容...