7个显示的div后自动换行

Question

我需要使用需要制作7x5正方形的AngularsJS来显示高度和宽度相等的div：

----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------
|  |  |  |  |  |  |  |
----------------------

我可以轻松地使用flex和md-wrap来自动断线，但连续7个div是不可能的。这是因为：
容器= 100％
container / 7 = 14.28
但价值只能是10或15！

我需要使用Angular，所以我需要这个结构：

<div ng-repeat="item in Ctrl.items">
     {{item}}
</div>

Answer 1

您可以使用CSS：

div:nth-of-type(8n) {
...
}

为每个第8个div提供特定的显示行为

（例如，使用clear或flex）。

示例：

div {
float: left;
}

div:nth-of-type(8n)::before {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: left;
}

Answer 2

您可以使用nth-child和after selcetors as demonstrated in this jsfiddle：

div {
    display:inline;
}
div:nth-child(7n) {
    color:red
}
div:nth-child(7n):after {
    content:' ';
    display:block;
}