Css 从上到下、从左到右水平浮动图元

我想创建一个具有水平滚动条的div。其中的元素应该从上到下、从左到右显示

1 3 6
2 4 7
  5 8

每个元素的高度都是可变的（每个元素的高度可能不相同），因此根据屏幕大小，元素位置可能会发生变化，例如：

1 3 5 7
2 4 6

或者在极端情况下：

1 2 3 4 5 6 7

如果我将float：左移到内部元素，则显示如下所示：

1 2 3
4 5 6

有没有一种方法可以只用CSS来实现这一点

---

我知道我可以通过javscript插件实现这一点，比如（单击masonryHorizontal）

尝试在容器上使用

display:flex

属性

#container {
    height:100%;
    width:500px;
    background:black;

  /* added CSS */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

---

只有接近这个问题，我才能想到一种混合的

列

CSS和最终的

写作模式

测试：

在正文中多次使用标记：

内联框

栏目：

body {
  column-width:9em;
}
b {
  display:inline-block;
  width:8em;
}

并增加了实验写作模式：

body {
  writing-mode:rl-tb;/* IEs */
  -webkit-writing-mode: horizontal-bt;
  -moz-writing-mode: horizontal-bt;/* FF fails here */
  -o-writing-mode: horizontal-bt;
  writing-mode: horizontal-bt;
}

---

我正在用chrome检查代码笔，它从下到上显示元素，而不是从上到下。@Alvaro这是

编写模式，你可以将其删除：）迷人的属性我不知道，它甚至只在webkit下响应@Alvaro。我相信我添加了moz前缀。在IE11、Opera、Firefox和Chrome中看起来还不错。我的回答是：在小提琴中使用
列计数
，因为您将
高度
设置为.container，而我没有给
列
编号，所以它会继续绘制所需的列：如果
container
没有定义
高度
，列将垂直增长并填充尽可能多的可用宽度。谢谢，这太棒了。两个问题，以防你知道。是否有一种方法可以使用与“最大宽度”类似的“最大列宽”？你能告诉我至少IE9兼容性的方向吗？感谢您可以为列宽设置%并为主容器本身设置最大宽度