Выровнять div по вертикальным столбцам

Question

Выровнять div по вертикальным столбцам

0

Я пытаюсь воспроизвести график вкладов Github (см. Следующий скриншот)

Каждый квадрат имеет .day класс. Я назвал контейнер .gh-contributions.

Проблема в том, что я не могу выровнять divs таким образом.

Если я добавлю float:left to .day я получаю:

 1 2 3 4 5 6 ...

Если я удалю его, я получу:

Мой код 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.

Как я могу это исправить?

Ionică Bizău 19 сен. 2013, в 14:30

Источник

Теги:

html

css

1 ответ

Ещё вопросы

fditz · Accepted Answer · 2013-09-19T09-46-00.000Z

Оберните каждые семь дней в классе.week так же, как эта обновленная скрипка: http://jsfiddle.net/tZKxM/2/ и задайте такие свойства, как:

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

Спасибо! Html-генератор (js) немного сложен, но заставил его работать. :-)
Большой! Я надеюсь, что это выглядит потрясающе (идея отличная)
Да, я буду использовать это здесь . Вы можете запустить и раскошелиться на проект. ;-)