zoukankan html css js c++ java

[css layout][07] three fixed columns

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

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

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

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

查看全文

相关阅读:
剑指offer：二维数组的查找
 安卓突击：绘制图像
 安卓突击：绘制图形和文本
 Android突击：定制控件
 Android突击：PanelLayout的实现
 POJ 1426 Find The Multiple
POJ 2251 Dungeon Master
event.target的认识
 JS延迟加载
 jquery中position 和offset的区别

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