positioning - 如何在每行中将可变宽度和高度的框向左浮动放置为一个垂直？

Question

我有很多盒子(显示:inline-block + float: left)，宽度和高度都是这样的:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

而且我不知道该怎么做，当盒子必须被包裹时，它会像这样在下一个“行”中对齐:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD
EE

不像自然 float :左:

AA BB CC DDD EE FF GG
   BB    DDD    FF EE
         DDD

真实示例(当前状态):

我想达到的预期结果:

jsFiddle 演示: here

Answer 1

在您的演示中，您同时拥有 float: left 和 display: inline-block。 float: left 强制 display: block，所以 display: inline-block 什么都不做。

您可以使用 display: inline-block; 实现您想要的结果；垂直对齐:顶部。

参见: http://jsfiddle.net/tdSnH/1/