动态表格的流体排列

Question

我对表格的流体排列有一个疑问。我附上了下面的屏幕截图，试图解释我正在努力实现的目标。

基本上，我有一些动态创建的表。它们的宽度是固定的，但它们的高度可以变化。我试图实现的是在浏览器窗口重新调整大小（根据表格组织）时空间的最大利用率。

我试过以下内容： 1.按照行数降序排列表。 2.使用'float：left'风格在桌子上（或桌子周围的一个格子）。

但是，正如您在下面看到的，表4（以下最后一个）可能使用的第一列上有一个间隔，但它并不是因为表3（第2列第2行）正在占用一些空间，防止桌子4被放置在上面。

我希望我以一种可以理解的方式描述它，如果不是，请让我知道我该如何澄清任何一点，以便您能帮助我。

基本上试图获得具有最大空间利用率的流体设计。关于如何实现这一点的任何想法？

在此先感谢。 Example http://img717.imageshack.us/img717/5492/exampleqm.jpg

Answer 1

尝试使用jQuery Masonry插件。

Answer 2

不能没有javascript（或大量的假设和限制）完成。

尝试Columnizer jQuery Plugin。