Blueprint_一个bug及修复_push-x

最近有时间关注并学习开源的CSS框架：Blueprint，现在的版本还在0.9，不可能十全十美。

 

发现一个bug，push-x，这个class不能正常工作。

本来仅仅想把bug报告一下算了，但是想何不自己解决一下，再报告上去。

 

源码：

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: right; position:relative; }

 

bug位置：红色标记。

bug特征：

1. float: right; 由于这个原因导致push-x会从最右侧再向后面移动x个grid

2. margin: 0 -40px 1.5em 40px;   导致向右侧移动x个grid之后，自己的原有位置没有全部 让出来

3. 1.5em 导致行距增加

 

解决方法：

1. float: left ;

2. margin: 0 -40px 1.5em 40px; 更改作margin: 0 - 80px 1.5em 40px;  

    position:relative; 40px使得自己margin-left增加了x个grid；

    相对定位后，自己仍旧占有原来的位置；

    所以最后，应该让右边的对象移如自己占位的地方，所以是 (x+1)*40，而不是x*40。

 

3. 1.5em 导致行距增加

    这个不清楚Blueprint为啥弄个1.5，改作0就可以了。

 

css也是需要测试的。也需要考虑各种边界情况，比如右边有占位对象，没有占位对象，空余位置够不够等。