CSS 每第 3 个元素向左清除

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

您正在浮动内联块，好吧，内联块，因此清除浮动将无济于事！将 display:inline-block 更改为 display:block。你的容器上还有 display:flex，删除它就可以了：https://jsfiddle.net/6w8a8qmt/1/

Answer 2

在#container中有一个class.mdl-grid将#container定义为flexbox-container。这使得它 children flex-items （即浮动被停用）

用

覆盖

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

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

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

这里是修改后的fiddle（我知道，白色背景不合适，但你得自己修改...）

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

CSS 每第 3 个元素向左清除

CSS clear left every 3rd element

html

css

flexbox

material-design-lite