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 }

查看全文

相关阅读:
建造者模式
 js日期转化（计算一周的日期）
vue实现全选效果
 less入门
 使用node初始化项目
 ES5新语法forEach和map及封装原理
 es6中的promise对象
 深入理解jsonp跨域请求原理
 markdown语法与使用
 Ajax商品分类三级联动实现

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