将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，但很多时候，如果与:nth-child(n+smth)一起使用，它甚至不会识别第n个孩子规则......

如何为前三列分配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

  

使用公式（a + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。