[css layout][09] three fixedcolumns

1.全部float向左，#wrapper宽度900px

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

2.全部float向右，#wrapper宽度900px

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

3.全部float向右#wrapper宽度500px

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

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

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

相关阅读:
你若不努力，整个世界将与你无关
【规范】yii2 resetful 授权验证
DFT到FFT的理解
【统计学】6.统计量及其抽样分布
【统计学】5.概率与概率分布
【统计学】4.数据的概括性度量
【统计学】3.数据的图表展示
【统计学】2.数据的搜集
【统计学】1.导论
小程序API（1.19）利用API函数设置标签栏的方法

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