将css第n个孩子应用到角生成的html

Question

试图确保列全部浮动到左侧，而行之间没有巨大间隙。

这里的HTML：

<div class="row hide-for-small"> 
     <div ng-repeat="module in modules"> 
      <div class="medium-6 large-4 columns"> 
       <div class="modBoxContainer"> 
        <div class="modBox"> 
         <div class="modHeading"> 
          <h1><span class="modNumber">{{ module.part }}</span> {{ module.title }}</h1> 
         </div> 
         <ul> 
          <li ng-repeat="section in module.sections"> 
           <a ng-href="#/education/{{ module.url }}/{{section.number}}/01"><strong>Part {{ section.number | number:0 }}: </strong>{{ section.title }}</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

至于CSS它是通过基金会或类似一般的柱状布局。直到它们像图片中一样高度不同时，柱子才是好的。我已经尝试将第n个孩子应用于.modBox和.modBoxContainer，但很多时候它甚至不会识别第n个孩子的规则，如果与:nth-child(n+smth)一起使用...

我怎么能指定1高度前三列和其余的高度不同？我试过应用height: auto,height: 100%，加上min-height或只是height规定的规定。

对不起，无法重新创建JSFiddle中的大部分代码，或者它是我正在处理的一个巨大的项目，但建议会很好。但是有些建议会很棒，因为我在想法上枯竭。

这里的问题的截图：

Answer 1

注意：此解决方案仅适用于现代的浏览器（IE9及以上）

对于选择的前三个元素，你可以做

nth-of-type(-n+3) 

来源

http://www.w3schools.com/cssref/sel_nth-of-type.asp

使用公式（an + b）。说明：a表示周期大小，n是计数器（从0开始），b是偏移值。