2列div、垂直方向に並べ替え

Question

divsを使用して2列のHTML-CSSレイアウトが必要です。 0〜5の要素には、1つの列のみが必要です。 6から10まで、2つの列。 そして、列ごとに最大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要素を使用していることを確認してください。