Два столбца divs, упорядоченные по вертикали

Question

Мне нужен 2-х столбчатый HTML-CSS-макет с использованием div. От 0 до 5 элементов он должен иметь только одну колонку. От 6 до 10 - две колонки. И максимальная единица из 6 элементов на столбе.

• 0 до 5:

 
elem1 
elem2 
elem3 
elem4 
elem5 

• 6 до 10

 
elem1 elem7 
elem2 elem8 
elem3 elem9 
elem4 elem10 
elem5 
elem6 

Answer 1

В этом случае мы можем использовать CSS3 преобразования для достижения необходимого поведения.

.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px dotted black; 
 
    padding:0; 
 
    transform: rotate(270deg); 
 
} 
 

 
.card { 
 
    margin:0; 
 
    padding:0; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: right; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    box-sizing:border-box; 
 
    transform: rotate(90deg) 
 
}

<div class="container"> 
 
    <div class="card">1</div> 
 
    <div class="card">2</div> 
 
    <div class="card">3</div> 
 
    <div class="card">4</div> 
 
    <div class="card">5</div> 
 
    <div class="card">6</div> 
 
    <div class="card">7</div> 
 
    <div class="card">8</div> 
 
    <div class="card">9</div> 
 
    <div class="card">10</div> 
 
</div>

Убедитесь, что использование прозрачного контейнера DIV, потому что его содержимое будет вращаться.