两列 div，垂直排列

【问题标题】：Two columns divs, ordered vertically两列 div，垂直排列
【发布时间】：2016-12-27 15:14:53
【问题描述】：

我需要一个使用 div 的 2 列 HTML-CSS 布局。从 0 到 5 个元素，它应该只有一列。从 6 到 10，两列。每列最多 6 个元素。

0 到 5：

元素1 元素2 元素3 元素4 elem5

6 到 10

元素 1 元素 7 elem2 elem8 elem3 elem9 elem4 elem10 elem5 元素6

【问题讨论】：

您的元素是固定高度还是可变高度？
不久前有人问过类似的问题...不可能（仅使用 CSS），高度可变... JS 可能是解决方案。
This 是我可以为您提供的唯一变体。
@sinisake 检查我的答案
@ArtemLopatiy，如果高度是固定的，那很容易......但是：jsfiddle.net/8b3b9x44

标签： html css multiple-columns

【解决方案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，因为它的内容会被旋转。

【讨论】：

感谢Artem，此代码兼容IE