Html layout: как плавать divs по вертикали

Как получить divs, чтобы повернуть вертикально, как на этом рисунке:

Фон: у меня есть сетка флажков с контентом, отсортированным в алфавитном порядке, и я хотел бы, чтобы прогресс в алфавитном порядке был вертикальным (так как горизонтальный порядок довольно сложно выполнить). Все divs имеют одинаковый размер (ширина, как изображение, высота = 1 размер строки).

Обновление: Чтобы уточнить: Основная цель состоит в том, чтобы иметь макет таблицы с переменным количеством столбцов на основе доступной ширины экрана и иметь ячейки в порядке столбцов. Фактическое количество divs не известно заранее.

Ответ 1

CSS

.cols {
        width:20%;
        float:left;
    }
    .rows {
        height:100px;
    }

HTML

 <div class="cols">
        <div class="rows">Div 1</div>
        <div class="rows">Div 2</div>
        <div class="rows">Div 3</div>
    </div>

    <div class="cols">
        <div class="rows">Div 4</div>
        <div class="rows">Div 5</div>
        <div class="rows">Div 6</div>
    </div>

    <div class="cols">
        <div class="rows">Div 7</div>
    </div>

Ответ 2

Если вы хотите установить высоту исправления в таблице, содержащей ячейки, вы можете использовать flexbox.

Установите контейнер для хранения:

display: flex;
flex-direction: column;
flex-wrap: wrap;

И ваши дочерние элементы:

flex-grow: 20%;
min-width: 200px;

Смотрите ручку: http://codepen.io/anon/pen/qIpAl

Ответ 3

@KunJ: совместимость макета сетки очень плохая... ie10 + только, http://caniuse.com/css-grid

Я думаю, что без JS вы не можете делать трюки, у меня была такая же проблема, чтобы разрешить их, я загрузил все элементы, сосчитал их и заменил в хорошем div

Ответ 4

Несмотря на то, что следующее не является полным решением, возможно, другие могут использовать его для достижения необходимого результата:

FIDDLE

Разметка

Divs, завернутые в контейнер div

CSS

div
{
    width: 100px;
    height: 50px;
    background: orange;
    border: 1px solid yellow;
    display:block;    
}
div:nth-child(4n)
{
    display:table-cell;   
}
.container
{
    display:table;
    width: 100%;
}