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

两列 div，垂直排列

Two columns divs, ordered vertically

html

css

multiple-columns