从上到下和从左到右水平浮动元素答案

【问题标题】：Floating elements horizontally from top to bottom and left to right从上到下和从左到右水平浮动元素
【发布时间】：2014-03-27 21:03:51
【问题描述】：

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

1 3 6
2 4 7
  5 8

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

1 3 5 7
2 4 6

或极端：

1 2 3 4 5 6 7

如果我浮动：离开内部元素，显示如下：

1 2 3
4 5 6

http://jsfiddle.net/nx88G/

有没有办法只使用 CSS 来实现这一点？

我知道我可以通过 isotope 之类的 javscript 插件来实现这一点（点击 masonryHorizontal）

【问题讨论】：

来自我的回答：在小提琴中使用column-count，因为您将height 设置为.container，而我没有给出columns 数字，它会继续绘制所需的列数：jsfiddle.net/nx88G/5如果 container 没有定义 height ，列将垂直增长并填充尽可能多的可用宽度。
谢谢，太好了。两个问题，以防万一。有没有办法像使用 max-width 一样使用 max-column-width？你能给我指出至少 IE9 兼容性的任何方向吗？谢谢
您可以为列宽设置 % 并为主容器本身设置一个最大宽度

标签： css position css-float horizontal-scrolling

【解决方案1】：

只有接近这个问题，我才能想到column CSS 和最终writing-mode 的组合。

测试：http://codepen.io/gc-nomade/pen/mGJfK/

在正文中多次使用的标记：<b> inline-box </b>

列：

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 检查 codepen，它从底部显示元素，而不是顶部底部。
@Alvaro 这是writing-mode，你可以放弃它:)
我不知道的迷人属性，它甚至可以响应jsfiddle.net/WnLB4
@Alvaro 我相信这个时候只在webkit下
我添加了 moz 前缀。它在 IE11、Opera、Firefox 和 Chrome 中看起来不错。 jsfiddle.net/WnLB4/1

【解决方案2】：

尝试在您的容器上使用 display:flex 属性

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

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

【讨论】：