Materialisecss卡发行

Question

我正在一个网站在angularjs和materializecss的帮助下工作。我面临的问题是，我在两张牌之间的图片中看到了下面可以看到的空白区域。

我试过这个this解决方案，但是卡片从上到下排序，我希望它们从左到右排序。我可以用浮球做什么吗？我可以使用砌体，但我觉得很难让它工作。因为我在更改ng-repeat时需要更新它，所以当图像加载速度缓慢时，砌体也不会按照我的要求进行。

也许有人可以指出我正确的方向。

<div class="container"> 
<div ng-controller="featured"> 
    <h1>Featured</h1> 
    <input type="search" ng-model="q" placeholder="search..."/> 
    <div class="row"> 
     <div class="cards-container"> 
      <div class="col s12 m6 l4" ng-repeat="x in data | filter:q as results" repeat-end="onEnd()"> 
       <div class="card" post-id="{{x.id}}"> 
        <a style="display:block" href="#post/{{x.id}}"> 
         <div class="card-image"> 
          <img ng-src="{{x.thumb}}"> 
          <span class="card-title">{{x.title | limitTocustom:30}}</span> 
         </div> 
        </a> 
        <div class="card-content"> 
         <p>{{x.description}}</p> 
        </div> 
        <div class="card-action grey-text lighten-2" ng-animate="'animate'" style="padding:15px 15px 15px 15px !important;"> 
         <div> 
          <!-- <span><span><i class="material-icons" style="margin-right:5px;">account_circle</i>{{x.author}}</span><span style="float:right;"><i class="material-icons red-text text-lighten-2" style="margin-right:5px;">favorite</i>{{x.points}}</span></span> --> 
          <span><i class="fa fa-user"></i> {{x.author}}</span> 
          <span style="float:right;"><i class="fa fa-heart"></i> {{x.points}}</span> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

首先解决办法，我发现 有了这个，我可以什么DIV我想clearfix配置。所以当用户使用较小的屏幕时，它将通过.col：n-child（2n + 1）来实现。

@media only screen and (min-width: 601px) and (max-width: 993px) { 
    .col:nth-child(2n+1) { 
     clear: both; 
    } 
} 
@media only screen and (min-width: 993px) and (max-width: 1400px) { 
    .col:nth-child(3n+4) { 
     clear: both; 
    } 
} 
@media only screen and (min-width: 1400px) { 
    .col:nth-child(3n+4) { 
     clear: both; 
    } 
} 

Answer 1

.card{ 
height:300px; 
} 

<div class="container"> 
<div ng-controller="featured"> 
    <h1>Featured</h1> 
    <input type="search" ng-model="q" placeholder="search..."/> 
    <div class="row"> 
     <div class="cards-container"> 
      <div class="col s12 m6 l4" ng-repeat="x in data | filter:q as results" repeat-end="onEnd()"> 
       <div class="card" post-id="{{x.id}}"> 
        <a style="display:block" href="#post/{{x.id}}"> 
         <div class="card-image"> 
          <img ng-src="{{x.thumb}}"> 
          <span class="card-title">{{x.title | limitTocustom:30}}</span> 
         </div> 
        </a> 
        <div class="card-content"> 
         <p>{{x.description}}</p> 
        </div> 
        <div class="card-action grey-text lighten-2" ng-animate="'animate'" style="padding:15px 15px 15px 15px !important;"> 
         <div> 
          <!-- <span><span><i class="material-icons" style="margin-right:5px;">account_circle</i>{{x.author}}</span><span style="float:right;"><i class="material-icons red-text text-lighten-2" style="margin-right:5px;">favorite</i>{{x.points}}</span></span> --> 
          <span><i class="fa fa-user"></i> {{x.author}}</span> 
          <span style="float:right;"><i class="fa fa-heart"></i> {{x.points}}</span> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

顶端提供固定的高度，以你的卡是这样。它会解决你的问题