内联块元素的问题

Question

我正在尝试制作一个原则上类似于“地铁”设计的屏幕。

我所采用的方式是所有元素的宽度相同，但高度不同。然后他们应该全部对齐顶部并找出空闲空间，不要在他们上方留下任何空间。

我遇到的问题是，如果我将元素设置为内联块，它们会像这样渲染：

如果我将它们设置为浮动，则一侧看起来正确，但另一侧看不到。这是浮动：左和浮动：右：

这是一个小例子： http://jsfiddle.net/paulocoelho/2qyrp/

Tze代码：

div{
    display:inline-block;
    vertical-align:top;
    margin:1px;
    /*float:left;*/
}

.smallBlock{
    height:50px;
    width:50px;
    background:blue;
}
.largeBlock{
    height:90px;
    width:50px;
    background:red;
}

Answer 1

将布局结构化为垂直拉伸的列，并使用可变高度元素依次填充每列。

Answer 2

假设您希望这是动态的，只有使用CSS3才能使用多列，如果您需要响应，则需要进行媒体查询。

我找到了一个tutorial，告诉你如何做到这一点，我自己没有测试过，但似乎应该可行。

无论如何我会建议你用JS做这件事，你将有更多的控制权，并让它成为跨浏览器。