html - 在垂直列上对齐 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

就像这个更新的小提琴一样，将每 7 天包装在 .week 类中：http: //jsfiddle.net/tZKxM/2/，并设置如下属性：

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