Html 电子贺卡分发
我正在angularjs和materializecss的帮助下开发一个网站。我面临的问题是,我得到了下面图片中两张卡之间的空白 我尝试了这个解决方案,但随后卡片从上到下排序,我希望它们从左到右排序。我可以用花车做些什么吗?我可以用砖石,但我发现很难让它工作。因为我需要在更改ng repeat时更新它,也就是当图像加载缓慢时,砖石无法满足我的要求 也许有人能给我指出正确的方向Html 电子贺卡分发,html,css,angularjs,materialize,masonry,Html,Css,Angularjs,Materialize,Masonry,我正在angularjs和materializecss的帮助下开发一个网站。我面临的问题是,我得到了下面图片中两张卡之间的空白 我尝试了这个解决方案,但随后卡片从上到下排序,我希望它们从左到右排序。我可以用花车做些什么吗?我可以用砖石,但我发现很难让它工作。因为我需要在更改ng repeat时更新它,也就是当图像加载缓慢时,砖石无法满足我的要求 也许有人能给我指出正确的方向 <div class="container"> <div ng-controller="featured
<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>
.card{
高度:300px;
}
作为特色的
{{x.description}}
{{x.author}}
{{x.points}}
像这样给你的牌定高。它将解决您的问题如果不看到HTML和CSS,您很难提供帮助…您可以在每3个元素之后执行clearfix之类的操作,因为您在一行中有3张卡。在bootstrap中使用clearfix,然后您可以自己实现它。您可以在使用javascript编辑内容后刷新砖石结构。砌体还有一个异步和同步方法。@Niraj,当一行中有3张卡时可以使用。但是当有2张牌时,这个技巧就不起作用了。@Luukth为了使clearfix有效,一行中的牌数需要固定。你的卡片数量不同??
@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;
}
}
.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>