垂直浮动 div - 向右溢出

Question

内容 div 在其中包含 X 数量的 div，但我想要的是内容 div 中的 div 从上到下而不是从左到 float(open for sugestions)对。 当内容 div 中的 div 达到 max-height 时，内容 div 中的 div 会向右溢出并从上到下重新开始（如下例所示），因此，拉伸内容 div 的宽度以适应新行。
我也想让它在移动浏览器中运行。

css---------------------------------------:
.content {
float: left;
min-width: 100px;
height: 95%;
}
.block {
float: left;
width: 100px; 
height: 100px;
}

html---------------------------------------:
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div><!-- end content -->

我的问题是：
1：如何让 div（在内容 div 内）从上到下浮动。
2：当内容 div 达到最大高度时，如何让 div 彼此相邻浮动并开始新的垂直行。

+ ==== content ==== +                                   + ==== content ====================== +
| +---------------+ |                                   | +---------------+ +---------------+ |
| |               | |                                   | |               | |               | |
| |     div 1     | |                                   | |     div 1     | |     div 4     | |
| |               | |                                   | |               | |               | |
| |               | |                                   | |               | |               | |                 
| |               | |                                   | |               | |               | |                 
| +---------------+ |                                   | +---------------+ +---------------+ |
| +---------------+ |                                   | +---------------+ +---------------+ |
| |               | |                                   | |               | |               | |                 
| |               | |                                   | |               | |               | |
| |     div 2     | |   when more then 3 divs vertacly  | |     div 2     | |     div 5     | |
| |               | |   i wand it to expand horizontaly | |               | |               | |
| |               | |                                   | |               | |               | |
| |               | |                                   | |               | |               | |
| +---------------+ |                                   | +---------------+ +---------------+ |
| +---------------+ |                                   | +---------------+                   |
| |               | |                                   | |               |                   |
| |               | |                                   | |               |                   |
| |     div 3     | |                                   | |     div 3     |                   |
| |               | |                                   | |               |                   |
| |               | |                                   | |               |                   |                 
| |               | |                                   | |               |                   |
| +---------------+ |                                   | +---------------+                   |
+ ================= +                                   + =================================== +

提前谢谢你！

Answer 1

您可以使用display: flex; 和flex-direction: column 这样做

这是一个演示：http://jsfiddle.net/hpy3vt1s/

此演示使用<div id="container"> 作为可用空间的指示器，它是视口高度的 100%。您必须设置height 或max-height 来控制每行的最大项目数。当您设置 max-height: 330; 时，一行/列中恰好有 3 个项目：Here is a demo showing this

body
{
    margin:0;
}

#container
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

#container .box
{
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: silver;
    flex: 0 0 auto;
}

HTML：

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
   ....
</div>

浏览器支持信息：http://caniuse.com/#feat=flexbox (IE10+)

关于 flexbox 的好文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/