如何使用Materializecss优化行和列之间的空间

我想删除卡之间的空间。 这发生在卡片具有不同的高度时。 所以，我认为框架试图把行放在最高的牌上面。

我的代码是这样的：

<div class="row"> <div class="col s12 m3"> <div class="card">Profile</div> </div> <% for(var i = 0 ; i < projects.length; i++){ % <div class="col s12 m3"> <div class="card"> Projects </div> </div> <% } %> </div> 

我正在使用Materializecss来进行网站devise。 http://materializecss.com/

代码在Github上： https ： //github.com/andreluizreis/git-user-assignment

Answer 1

选项1

有这个解决scheme，实现你所需要的： https ： //github.com/leozdgao/responsive_waterfall ，这里有一个现场演示： http : //www.cssscript.com/demo/pinterest-like-responsive-fluid-grid -layout与-纯的JavaScript /

选项＃2

pinterest执行卡片的方式也是一个不错的方法，将所有“卡片”设置为绝对位置，并在循环内部计算卡片的正确位置。 基于以前的卡片。 这样做，你可以安排所有的卡，无论高度，只是在每个div设置style =“top：y，left：x”。

选项＃3

本文讨论使用浮动与css3列，应该有所帮助： http : //cssdeck.com/labs/css-only-pinterest-style-columns-layout