内嵌块元素问题

Question

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

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

我遇到的问题是，如果我设置的元素，inline-block的他们提供这样的：

如果我将它们设置为浮动，一边期待权，但另一个没有。下面是两个浮动：左和float：右：

下面是一个例子的小提琴： http://jsfiddle.net/paulocoelho/2qyrp/

梓代码：

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

假设您希望这是动态的，那么只能使用CSS3，使用多列，并且如果您需要响应，您需要媒体查询。

我发现了一个tutorial，告诉你如何做到这一点，没有自己测试过，但似乎它应该工作。

反正我会推荐你​​用JS来做这件事，你会对它有更多的控制，并且让它成为跨浏览器。

Answer 2

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