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

相关阅读:
异步FIFO的Verilog实现
二进制格雷码与二进制自然码
握手协议
电容充放电和开关电容
Vivado自定义IP封装流程
【转】warning 之 [IP_Flow 19-3153]
【转】mipi-csi-2解读
版本管理-link
[转载]yuv和yCbCr的差异
【转】用verilog实现RGB格式图像到YCbCr或YUV格式的转换及其验证方法（RGB2YCrCb）（RGB2YUV）

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