最近有时间关注并学习开源的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也是需要测试的。也需要考虑各种边界情况,比如右边有占位对象,没有占位对象,空余位置够不够等。
?
?
?