Как получить divs, чтобы повернуть вертикально, как на этом рисунке:
Фон: у меня есть сетка флажков с контентом, отсортированным в алфавитном порядке, и я хотел бы, чтобы прогресс в алфавитном порядке был вертикальным (так как горизонтальный порядок довольно сложно выполнить). Все divs имеют одинаковый размер (ширина, как изображение, высота = 1 размер строки).
Обновление: Чтобы уточнить: Основная цель состоит в том, чтобы иметь макет таблицы с переменным количеством столбцов на основе доступной ширины экрана и иметь ячейки в порядке столбцов. Фактическое количество divs не известно заранее.
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>
Если вы хотите установить высоту исправления в таблице, содержащей ячейки, вы можете использовать flexbox.
Установите контейнер для хранения:
display: flex;
flex-direction: column;
flex-wrap: wrap;
И ваши дочерние элементы:
flex-grow: 20%;
min-width: 200px;
Смотрите ручку: http://codepen.io/anon/pen/qIpAl
@KunJ: совместимость макета сетки очень плохая... ie10 + только, http://caniuse.com/css-grid
Я думаю, что без JS вы не можете делать трюки, у меня была такая же проблема, чтобы разрешить их, я загрузил все элементы, сосчитал их и заменил в хорошем div
Несмотря на то, что следующее не является полным решением, возможно, другие могут использовать его для достижения необходимого результата:
Divs, завернутые в контейнер div
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%;
}