用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>
<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>
浙公网安备 33010602011771号