Как плавать и вертикально сортировать элементы?

Question

У меня есть элементы, которые плавают и имеют ширину = 20% (5 элементов в строке).

Это выглядит следующим образом:

1 2 3 4 5 
6 7 8 9 10 
11 12 13 14 15 

То, что я хочу сейчас, чтобы «сортировать» их вертикально. Это будет выглядеть так:

1 4 7 10 13 
2 5 8 11 14 
3 6 9 12 15 

Я не могу придумать способ архивирования этого.

Возможно ли это только с помощью CSS или мне нужен PHP или JS для архивирования?

Answer 1

Вы можете использовать раскладку CSS3 multiple column.

.container { 
 
    width: 100px; 
 
    -webkit-column-count: 5; 
 
    -moz-column-count: 5; 
 
    column-count: 5; 
 
}

<div class="container"> 
 
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
 
</div>

Или использовать CSS3 flexbox, чтобы сделать это.

.container { 
 
    width: 100px; 
 
    height: 60px; /*20x3*/ 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 
.container span { 
 
    flex: 0 0 20px; 
 
}

<div class="container"> 
 
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span> 
 
</div>