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

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

  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-left  { 
 13       width  :  30%  ; 
 14       height  :  800px  ; 
 15       background  :  red  ; 
 16       float  :  left  ; 
 17   } 
 18   .main-right  { 
 19       width  :  70%  ; 
 20       height  :  800px  ; 
 21       background  :  pink  ; 
 22       float  :  right  ; 
 23   } 
 24   #footer  { 
 25       clear  :  both  ; 
 26       height  :  50px  ; 
 27       background  :  gray  ; 
 28   } 
 29     style  > 
 30     head  > 
 31     body  > 
 32     div   id  ="herder"  > 页头   div  > 
 33     div   class  ="main-left"  > 左列   div  > 
 34     div   class  ="main-right"  > 右列   div  > 
 35     div   id  ="footer"  > 页脚   div  > 
 36     body  > 
 37     html  >  

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