使用垂直div来动态创建列

Question

我需要垂直动态列而不超过容器div。页面的滚动应该是水平的。以示例here为例（第21列应该如图所示向上移动）

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

＆＃13;

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强>参考文献：

align-content

flex-direction

flex-wrap

Answer 2

我根据display:flex;的工作得到了解决方案，但可能会遇到兼容性问题。我把它添加到容器中：

display: flex;
flex-direction:column;
align-content: flex-start;
flex-wrap: wrap;

那些项目：

display: flex-box;

请参阅jsfiddle：http://jsfiddle.net/ht48zncu/6/

Answer 3

检查我的解决方案：http://jsfiddle.net/ht48zncu/4/

我发送给div的前20个项目twenty-in-column。 接下来的20个项目我也发送到类似的div。

并添加css：.twenty-in-column{display:inline-block;vertical-align:top;}