将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

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