对齐垂直列上的div

Question

我尝试重现Github贡献图（参见下面的屏幕截图）

  

每个方格都有.day个等级。我将容器命名为.gh-contributions。

问题在于我无法以这种方式对齐div。

 1 8
 2 9
 3 10
 4 11
 5 12
 6 ...
 7

如果我将float:left添加到.day，我会：

 1 2 3 4 5 6 ...

如果我删除它，我会得到：

 1
 2
 4
 5
 6
 7
 8
 9
 10
 ...

我的CSS代码是：

.day {
    width: 10px;
    height: 10px;
    background: white;
    margin: 1px;
}

.gh-contributions {
    width: 775px;
    padding: 10px;
    height: 120px;
    background: lightblue;
    position: absolute;
    top: 15%;
    left: 10%;
}
.active {
    background: red !important;
}

请参阅JSFIDDLE。

我该如何解决？

Answer 1

在.week课程中每隔七天换一次，就像这个更新的小提琴一样：http://jsfiddle.net/tZKxM/2/，并设置如下属性：

.week{
    height:120px;
    width: 10px;
    float:left;
    margin-right: 2px;
}