2016-12-27 85 views
1

我需要一個使用div的2列HTML-CSS佈局。 從0到5個元素,它應該只有一列。從6日到10日,兩列。 每列最多6個元素。垂直排列的兩列div

  • 0至5:
 
elem1 
elem2 
elem3 
elem4 
elem5 
  • 6至10
 
elem1 elem7 
elem2 elem8 
elem3 elem9 
elem4 elem10 
elem5 
elem6 
+1

你的元素將是固定的高度或將有不同的高度? –

+1

類似的問題不久前被問到......不可能(只有CSS),可變高度...... JS可能是解決方案。 – sinisake

+1

[** This **](https://jsfiddle.net/j7gxf6kh/)是我能爲您提供的唯一變體。 –

回答

2

在這種情況下,我們可以使用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,因爲它的內容將被旋轉。

+0

謝謝Artem,這個代碼與IE 10兼容? – rdiazroman

+0

@rdiazroman是的,請查看http://caniuse.com/#search=transform –

+0

這真的很有創意,+1 – rabelloo