html - 使用垂直 div 动态创建列

Question

我需要在不超出容器 div 的情况下动态地垂直分列。页面的滚动应该是水平的。举个例子here (第21列应如图所示向上移动)

图片:http://i.stack.imgur.com/f2zWQ.png

html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #contenedor-principal {
        height: 500px;
        background-color: lightgray;
    }

    .columna {
        width: 200px;
        height: 100%;
    }

    .nivel {
        width: 150px;
        min-height: 20px;
        margin: 5px;
        color:white;
    }

    .nivel1 {
        background-color: green;
    }

    .nivel2 {
        background-color: red;
    }

    .nivel3 {
        background-color: yellow;
    }

    .nivel4 {
        background-color: aqua;
    }

    .nivel5 {
        background-color: black;
    }

<div id="contenedor-principal">
    <div class="nivel nivel1">
        1
    </div>
    <div class="nivel nivel2">
        2
    </div>
    <div class="nivel nivel3">
        3
    </div>
    <div class="nivel nivel4">
        4
    </div>
    <div class="nivel nivel5">
        5
    </div>
    <div class="nivel nivel5">
        6
    </div>
    <div class="nivel nivel5">
        7
    </div>
    <div class="nivel nivel5">
        8
    </div>
    <div class="nivel nivel5">
        9
    </div>
    <div class="nivel nivel5">
        10
    </div>

    <div class="nivel nivel5">
        11
    </div>
    <div class="nivel nivel5">
        12
    </div>
    <div class="nivel nivel5">
        13
    </div>
    <div class="nivel nivel5">
        14
    </div>
    <div class="nivel nivel5">
        15
    </div>
    <div class="nivel nivel5">
        16
    </div>
    <div class="nivel nivel5">
        17
    </div>
    <div class="nivel nivel5">
        18
    </div>
    <div class="nivel nivel5">
        19
    </div>
    <div class="nivel nivel5">
        20
    </div>
    <div class="nivel nivel5">
        21
    </div>
    <div class="nivel nivel5">
        22
    </div>
    <div class="nivel nivel5">
        23
    </div>
    <div class="nivel nivel5">
        24
    </div>
    <div class="nivel nivel5">
        25
    </div>
    <div class="nivel nivel5">
        26
    </div>
    <div class="nivel nivel5">
        27
    </div>
    <div class="nivel nivel5">
        28
    </div>
    <div class="nivel nivel5">
        29
    </div>
    <div class="nivel nivel5">
        30
    </div>
    <div class="nivel nivel5">
        31
    </div>
    <div class="nivel nivel5">
        32
    </div>
</div>

谢谢。

Answer 1

一种可能的解决方案是使用 flex :

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#contenedor-principal {
  height: 500px;
  background-color: lightgray;
  display: flex; /*set display to flex*/
  flex-direction: column; /*flex direction colum*/
  flex-wrap: wrap; /*flex wrap*/
  align-content: flex-start; /*add align content flex start*/
}
.columna {
  width: 200px;
  height: 100%;
}
.nivel {
  width: 150px;
  min-height: 20px;
  margin: 5px;
  color: white;
}
.nivel1 {
  background-color: green;
}
.nivel2 {
  background-color: red;
}
.nivel3 {
  background-color: yellow;
}
.nivel4 {
  background-color: aqua;
}
.nivel5 {
  background-color: black;
}

<div id="contenedor-principal">

  <div class="nivel nivel1">
    1
  </div>
  <div class="nivel nivel2">
    2
  </div>
  <div class="nivel nivel3">
    3
  </div>
  <div class="nivel nivel4">
    4
  </div>
  <div class="nivel nivel5">
    5
  </div>
  <div class="nivel nivel5">
    6
  </div>
  <div class="nivel nivel5">
    7
  </div>
  <div class="nivel nivel5">
    8
  </div>
  <div class="nivel nivel5">
    9
  </div>
  <div class="nivel nivel5">
    10
  </div>

  <div class="nivel nivel5">
    11
  </div>
  <div class="nivel nivel5">
    12
  </div>
  <div class="nivel nivel5">
    13
  </div>
  <div class="nivel nivel5">
    14
  </div>
  <div class="nivel nivel5">
    15
  </div>
  <div class="nivel nivel5">
    16
  </div>
  <div class="nivel nivel5">
    17
  </div>
  <div class="nivel nivel5">
    18
  </div>
  <div class="nivel nivel5">
    19
  </div>
  <div class="nivel nivel5">
    20
  </div>
  <div class="nivel nivel5">
    21
  </div>
  <div class="nivel nivel5">
    22
  </div>
  <div class="nivel nivel5">
    23
  </div>
  <div class="nivel nivel5">
    24
  </div>
  <div class="nivel nivel5">
    25
  </div>
  <div class="nivel nivel5">
    26
  </div>
  <div class="nivel nivel5">
    27
  </div>
  <div class="nivel nivel5">
    28
  </div>
  <div class="nivel nivel5">
    29
  </div>
  <div class="nivel nivel5">
    30
  </div>
  <div class="nivel nivel5">
    31
  </div>
  <div class="nivel nivel5">
    32
  </div>
</div>

引用资料:

align-content

flex-direction

flex-wrap