css - 如何使用 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>

我正在使用 Materializecss 进行网站设计。 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 实现卡片的方式也是一种很好的方式，将所有“卡片”设置为 position:absolute 并在循环内计算卡片的正确位置。基于之前的卡片。这样做你可以排列所有卡片，无论高度如何，只需在每个 div 设置 style="top:y, left:x"。

选项 #3

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