代码
<!
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 >
< 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 >