zoukankan html css js c++ java

[css layout][08] three fixedcolumns

1.float向左#wrapper宽度900px

 1 #container {
 2   width: 900px;
 3 }
 4 #wrapper {
 5   width: 900px;
 6   float: left;
 7 }
 8 #content {
 9   margin: 0 200px;
10 }
11 #navigation {
12   width: 200px;
13   float: left;
14   margin-left: -200px;
15 }
16 #extra {
17   width: 200px;
18   float: left;
19   margin-left: -900px;
20 }
21 #footer {
22   clear: both;
23 }

2.float向右#wrapper宽度900px

 1 #container {
 2   width: 900px;
 3 }
 4 #wrapper {
 5   width: 900px;
 6   float: right;
 7 }
 8 #content {
 9   margin: 0 200px;
10 }
11 #navigation {
12   width: 200px;
13   float: right;
14   margin-right: -900px;
15 }
16 #extra {
17   width: 200px;
18   float: right;
19   margin-right: -200px;
20 }
21 #footer {
22   clear: both;
23 }

3.float向右#wrapper宽度500px

 1 #container {
 2   width: 900px;
 3 }
 4 #wrapper {
 5   width: 500px;
 6   float: right;
 7   margin-left: -200px;
 8   position: relative;
 9   left: -200px;
10 }
11 #navigation {
12   width: 200px;
13   float: right;
14   margin-right: -300px;
15 }
16 #extra {
17   width: 200px;
18   float: right;
19   margin-left: -400px;
20   position: relative;
21   left: -400px;
22 }
23 #footer {
24   clear: both;
25 }

4.float全部向左#wrapper宽度500px

 1 #container {
 2   width: 900px;
 3 }
 4 #wrapper {
 5   width: 500px;
 6   float: left;
 7   margin-right: -200px;
 8   position: relative;
 9   left: 200px;
10 }
11 #navigation {
12   width: 200px;
13   float: left;
14   margin-right: -400px;
15   position: relative;
16   left: 400px;
17 }
18 #extra {
19   width: 200px;
20   float: left;
21   margin-left: -300px;
22 }
23 #footer {
24   clear: both;
25 }

查看全文

相关阅读:
微信小程序
 微信小程序
 微信小程序
 微信小程序
 es5
es5
es5||es6
es5
5 个常用的软件质量指标
 Solr

原文地址：https://www.cnblogs.com/qiudeqing/p/3422358.html