两列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 ，因为它的内容将会被旋转。