Materialisecss卡分发答案

【问题标题】：Materializecss card distributionMaterialisecss卡分发
【发布时间】：2017-05-26 09:46:24
【问题描述】：

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

我找到的第一个解决方案 有了这个，我可以配置我想要 clearfix 的 div。因此，当用户使用较小的屏幕时，它会使用 .col:nth-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;
    }
}

【问题讨论】：

如果不看 HTML 和 CSS 就很难帮忙...
您可以在每 3 个元素之后执行 clearfix 之类的操作，因为您在 1 行中有 3 张卡片。在bootstrap中通过clearfix，之后可以自己实现。
您可以在使用 javascript 编辑内容后刷新砌体。 masonry 也有异步和同步方法。
@Niraj 在 1 行中有 3 张卡片时有效。但是当有 2 个时，这个技巧就不再起作用了。
@Luukth 需要固定一行中的卡片数量才能使 clearfix 工作。您的卡片数量不同？？

标签： html css angularjs materialize masonry

【解决方案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>

像这样为您的卡片设置固定高度。它会解决你的问题

【讨论】：