AngularJS：使用ng-repeat和ng-include进行不正确的对齐

Question

我有一个ng-repeat，里面有一个包含不同的html部分。

<div ng-repeat="item in feedItems">
  <div ng-include="'item.itemType.html'">
  </div>
</div>

以下是我的部分html itemType.html

的CSS

.card {
    position: relative;
    margin: 15px 2px 0 2px;
    width: 120px;
    float: left;
    text-align: center;
    padding-top: 5px;
    border: 1px solid #e6e6e6;
}

现在ng-repeat div没有任何固定大小。我想要的是根据大小正确对齐ng-repeat项目。

虽然我没有足够的声誉，但我无法在此处发布图片。

截至目前，我们可以想象输出就像3个html div，其中第二个div略微增加hieght并排放置，第四个div放在第三个div之下。而第4个div应该与第一个div下面的左边对齐。

先谢谢。

Answer 1

尝试

.card:nth-of-type(3n+1) { clear: left; }

如果您需要支持无法识别的浏览器：nth-​​of-type（http://caniuse.com/#search=nth-of-type），则必须找到一种方法将额外的css类.clear应用于每个第4项：

.card.clear { clear: left; }

这将导致如下的视觉表示：

如果您希望实现的目标看起来像

您必须找到完全不同的解决方案，例如使用css列。