html - float :left fill same column where possible

Question

我正在尝试放置一些 div，规则如下:尽可能填充第一列，然后(当第一列已满时)填充第二列，依此类推。(请参见下图)

这就是我想要的:(用 Paint 创建!)

在上图中，如您所见，第一列有 1、2、3、4，并且没有足够的垂直空间将 5 放入第一列。所以5应该放在第二列...

我尝试使用 float:left 创建类似上图的内容，但结果是这样的:

如何创建类似于第一张图片的东西？我当前的代码(创建第二张图片)有什么问题？

---

这是我的 HTML 代码:

<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>

这是我的 CSS:

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}
.i1,.i2,.i3 {
    float:left;    
    width:100px;
    background:lime;
    border-radius: 20px;
    text-align:center;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}

Fiddle of my code

Answer 1

just modern tablets and smartphones should show it correctly

在这种情况下，使用 CSS3 columns . browser support应该足够好了。

http://jsfiddle.net/thirtydot/AQ7bp/4/

.container {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;

    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
}
.i1,.i2,.i3 {
    display: inline-block;
    vertical-align: top;
}