用class改变页面列数排列方式

代码

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 用class改变页面列数排列方式 </ title >
< style  type ="text/css" >

* { font-size :  12px ; margin : 0 ; padding : 0 ; font-family : "microsoft yahei" ; }
#header { height : 100px ; background : #ccc ; clear : both }
#footer { height : 100px ; background : #ccc ; clear : both }

#core { background : #ccc ; }
  #col1 { background : #666 ; width : 250px ; }
  #col2 { background : #f60 ; width : 250px ; }
  #col3 { background : #ff0 ; }

.cls1 #col1 { float : left ; }
.cls1 #col2 { float : left ; clear : left ; }
.cls1 #col3 {}
/* 二列 ||------ 左右列浮动左则，中间区块自适应 */

.cls2 #col1 { float : right ; }
.cls2 #col2 { float : right ; clear : right ; }
.cls2 #col3 {}
/* 二列 ------|| 左右列浮动右则，中间区块自适应 */

.cls3 #col1 { float : left ; }
.cls3 #col2 { float : right ; }
.cls3 #col3 {}
/* 三列 ||----|| 左右列固定宽高，中间区块自适应 */

.cls4 #col1 { float : left ; }
.cls4 #col2 { float : left ; }
.cls4 #col3 {}
/* 三列 || ||---- 左右列固定宽高，浮动左则，中间区块自适应 */

.cls5 #col1 { float : right ; }
.cls5 #col2 { float : right }
.cls5 #col3 {}
/* 三列 ---- || || 左右列固定宽高，浮动右则，中间区块自适应 */

</ style >
</ head >

< body >

< div  id ="header" > header </ div >

< div  id ="wrapper"  class ="cls1" >
   < div  id ="col1" > col1 </ div >

   < div  id ="col2" > col2 </ div >   
   < div  id ="col3" > col3 </ div >
</ div >

< div  id ="wrapper"  class ="cls2"  style ="display:none" >
   < div  id ="col1" > col1 </ div >
   < div  id ="col2" > col2 </ div >   
   < div  id ="col3" > col3 </ div >
</ div >

< div  id ="wrapper"  class ="cls3"  style ="display:none" >
   < div  id ="col1" > col1 </ div >
   < div  id ="col2" > col2 </ div >   
   < div  id ="col3" > col3 </ div >
</ div >

< div  id ="wrapper"  class ="cls4"  style ="display:none" >
   < div  id ="col1" > col1 </ div >
   < div  id ="col2" > col2 </ div >   
   < div  id ="col3" > col3 </ div >

</ div >

< div  id ="wrapper"  class ="cls5"  style ="display:none" >
   < div  id ="col1" > col1 </ div >
   < div  id ="col2" > col2 </ div >   
   < div  id ="col3" > col3 </ div >
</ div >

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

</ body >

</ html >

 

转载于:https://www.cnblogs.com/joys/archive/2009/12/03/1616168.html