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

Question

我想删除卡片之间的空间。当卡片具有不同的高度时会发生这种情况。所以，我认为该框架试图将该行置于最高卡之上。

我的代码就像这样：

<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>

我正在使用Materialisecss进行网站设计。 http://materializecss.com/

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

Answer 1

选项＃1

这个解决方案实现了您的需求：https://github.com/leozdgao/responsive_waterfall，这里有一个现场演示：http://www.cssscript.com/demo/pinterest-like-responsive-fluid-grid-layout-with-pure-javascript/

选项＃2

pinterest实现卡片的方式也是一种很好的方式，设置所有“卡片”的位置：绝对和循环内部他们计算卡的正确位置。基于以前的卡片。这样你可以安排所有卡片，无论高度如何，只需在每个div处设置style =“top：y，left：x”。

选项＃3

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

Answer 2

在CSS中添加以下样式：

.card
{
    padding:10px 10px 10px 10px;
}