垂直排列的兩列div

Question

我需要一個使用div的2列HTML-CSS佈局。 從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，因爲它的內容將被旋轉。