将表格放在另一个下面形成列

Question

我正在尝试创建包含不同类别元素的不同列。

Demo online

我开始使用列表，但我发现表似乎最适合此目的，类别不会分成不同的列。

我现在遇到的问题是，如果我有一个只有一行或两行的表，那么它下面会有一个巨大的空白，因为其他表不会填充它。

是否有可能适合这些白色空间并将桌子放在另一个下面而不是右侧？

我愿意使用外部脚本或插件来解决问题。

预期结果

table {
    vertical-align:top
}
table {
    display:inline-block;
    width:25%
}

注意：我无法正确知道我将拥有多少张桌子或者有多少元素，所以这不能静态完成。

Answer 1

使用像http://masonry.desandro.com/这样的库，请参阅http://jsfiddle.net/tnbqxqpg/1

var elem = document.querySelector('div');
var msnry = new Masonry(elem, {
  itemSelector: 'table',
  columnWidth: 200
});


<div>
  <table border="1">
   ...
  </table>
  <table border="1">
    ...
  </table>
  <table border="1">
    ...
  </table>
</div>

Answer 2

当您删除

时

display:inline-block;

然后它将显示所有表格在另一个

之下