[css layout][01] three percentage columns

三列宽度值为百分比的浮动布局, 来源:　http://blog.html.it/layoutgala/LayoutGala01.html

效果如图

方法1:　全部元素向右浮动, 通过设置负margin和position:relative移动元素位置, 注意:

负边距方向与浮动方向相同时会让元素在浮动的位置上向浮动方向继续移动对应负边距的值, 此时会覆盖前面的元素, 移动的空间会空出来由后续元素填补.
负边距方向与浮动方向相反时不会移动元素位置, 但是会在负边距方向产生对应大小的可用区域, 后续浮动元素会占据此区域并且与该元素重合, 此时需要使用position:relative结合left, right移动对应负边距值, 保证位置按照需求移动.

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

方法2: right right none, 还是负边距和position:relative定位

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

方法3: right right left

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

方法4: right left right

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

思路: #wrapper 和#navigation必须float, #extra可能有3种取值. 然后一个个凑....

作者的方法:

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

只用了负边界. 比我的好多了..