html - 在垂直列上对齐 div

Question

我尝试重现 Github 贡献图(见以下截图)

每个方 block 都有 .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 类中每 7 天包装一次，就像这个更新的 fiddle 一样:http://jsfiddle.net/tZKxM/2/ ，并设置如下属性:

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