html - 内联块元素的问题

Question

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

我的方法是所有元素的宽度相同，但高度不同。然后它们应该都对齐到顶部并找出有哪些空闲空间，而不是在它们上方留下任何空间。

我遇到的问题是，如果我将元素设置为 inline-block 它们呈现如下：

如果我将它们设置为浮动，则一侧看起来正确，但另一侧不正确。这是 float:left 和 float:right 的情况：

这是一个例子：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

将布局构建为垂直延伸的列，并用可变高度元素依次填充每一列。

Answer 2

假设您希望它是动态的，则只能使用 CSS3，使用多列，如果您需要它是响应式的，您将需要媒体查询。

我找到了一个教程，向您展示了如何做到这一点，我自己还没有测试过，但似乎它应该可以工作。

无论如何，我建议您使用 JS 来执行此操作，您将对它有更多的控制权，并且还可以使其成为跨浏览器。