[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 }

 

posted @ 2013-11-13 22:51  我的百科全书  阅读(205)  评论(0)  编辑  收藏  举报