zoukankan html css js c++ java

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

查看全文

相关阅读:
LeetCode-018-四数之和
 LeetCode-017-电话号码的字母组合
 LeetCode-016-最接近的三数之和
 LeetCode-015-三数之和
 LeetCode-014-最长公共前缀
 LeetCode-013-罗马数字转整数
 LeetCode-012-整数转罗马数字
 LeetCode-011-盛最多水的容器
 LeetCode-010-正则表达式匹配
 [leetcode]103. Binary Tree Zigzag Level Order Traversal二叉树Z形遍历

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