float:left尽可能填充相同的列

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

我的代码的小提琴

Answer 1

只是现代平板电脑和智能手机应该正确显示它

在这种情况下,请使用CSS3列.该浏览器支持应该是足够好的.

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