html - CSS clear left every 3rd element

Question

我觉得自己就像那个 CSS 迷因中的彼得格里芬，在乱搞 CSS。有人可以解释我如何获得 3 行以及为什么下面的代码不起作用吗？

这是一个jsfiddle example提供更多背景信息

  <div id="container" class="mdl-grid mdl-cell mdl-cell--12-col mdl-color--white">
      <a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color-text--white mdl-color--blue-A400"
      ng-repeat="i in [1,2,3,4,5,6,7,8,9] track by $index" 
      ng-bind="i">

      </a>
  </div>

#container a {
    line-height: 6rem;
    font-size: 2.5rem;
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    margin-top:10px;
    float:left;
    display:inline-block;
}
#container a:nth-child(3n) {
     color:red !important;
     clear:left;
}

Answer 1

在#container 中有一个类.mdl-grid 定义#container 为flexbox-container。这使得它的 child 成为 flex 元素(即 float 被停用)

用

覆盖它

#container.mdl-grid {
  display: block;
}

并将最后一个选择器更改为

#container a:nth-child(3n + 1) { ... }

这是更改后的 fiddle (我知道，白色背景不合适，但你必须自己修复...)

https://jsfiddle.net/eqy1f8k4/2/