[css layout][02] three percentage columns

 

 

1。作者的方法

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

 

2。他float：left我float：right模仿一个

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

 

3.全部float向左，wrapper宽度缩小

 1 #wrapper {
 2   float: left;
 3   width: 50%;
 4   margin-right: -25%;
 5   position: relative;
 6   left: 25%;
 7 }
 8 #navigation {
 9   float: left;
10   width: 25%;
11   margin-right: -50%;
12   position: relative;
13   left: 50%;
14 }
15 #extra {
16   float: left;
17   width: 25%;
18   margin-left: -25%;
19 }
20 #footer {
21   clear: both;
22 }

 

4.全部float向右

 1 #wrapper {
 2   float: right;
 3   width: 50%;
 4   margin-left: -25%;
 5   position: relative;
 6   right: 25%;
 7 }
 8 #navigation {
 9   float: right;
10   width: 25%;
11   margin-right: -25%;
12 }
13 #extra {
14   float: right;
15   width: 25%;
16   margin-left: -50%;
17   position: relative;
18   right: 50%;
19 }
20 #footer {
21   clear: both;
22 }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2013-11-09 23:46  我的百科全书  阅读(169)  评论(0)  编辑  收藏  举报