html - 内联 block 元素的问题

Question

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

我采用的方法是所有元素的宽度相同，但高度不同。然后它们应该全部对齐到顶部并弄清楚那里有哪些空白空间，不要在它们上面留下任何空间。

我遇到的问题是，如果我将元素设置为内联 block ，它们会像这样呈现:

如果我将它们设置为 float ，一侧看起来正确，但另一侧看起来不正确。这是 float :左和 float :右:

这是一个 fiddle 示例: 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

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

我找到了 tutorial它向您展示了如何执行此操作，我自己尚未对其进行测试，但看起来应该可行。

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