列出未正确对齐ng-repeat的项目

Question

我有一个简单的ng-repeat <li>。每个<li>消耗宽度的33.33％，因此每行消耗3个项目。

但是，由于某种原因，第二行中的项目不对齐。经过大量挖掘后，如果我应用min-width说400px，那么它就可以了。但是，我无法做到这一点，因为描述文本长度是动态的。

HTML：

<ul class="grid-wrap">
  <li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20">
    <div>{{ job.JobTitle }}</div>
    <div>{{ job.Location }}</div>
    <div>{{ job.JobDescription | limitTo:descriptionLimit }} 
      <span ng-click="descriptionLimit = job.JobDescription.length"> >> </span></div>
  </li>
</ul>

CSS：

ul, ol {


list-style: none;
    padding: 0;
    margin: 0;
}

.grid-wrap {    
    margin-left: -3em; /* the same as your gutter */
    overflow: hidden;
    clear: both;
}

.grid-col {
    float: left;
    padding-left: 3em; /* this is your gutter between columns */
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.one-third {
    width: 33.33%;
}

plunker：http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview

如果您点击>>，说明会展开，您可以看到每个<li>没有对齐：

Answer 1

这样的东西可能就是你想要的吗？

.one-third:nth-of-type(3n+1) {
  clear: both;
}

即。如果您希望每行最多有3 li个，并且您希望始终垂直对齐行，则需要明确这样做。

编辑：当然，您也可以使用Angular执行此操作，例如，首先定义清算类：

.clear-li {
  clear:both
}

然后将其应用于ng-class：

      <li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20" ng-class="{'clear-li': ($index % 3 === 0)}">