Css 无包装的清理';第'行;容器

Css 无包装的清理';第'行;容器,css,clearfix,Css,Clearfix,有没有一种方法可以在每行没有包装容器的情况下清除行的最后一个元素之后的内容? 里面的列大小会有所不同,有一个“最后”类,我可以在该分区关闭后清除吗?我无法向标记中添加任何内容 标记: <div class="grid-row"> <div class="col-6"> col 6 </div> <div class="col-6 last"> col 6 </div> <!--

有没有一种方法可以在每行没有包装容器的情况下清除行的最后一个元素之后的内容? 里面的列大小会有所不同,有一个“最后”类,我可以在该分区关闭后清除吗?我无法向标记中添加任何内容

标记:

<div class="grid-row">
   <div class="col-6">
     col 6   
  </div>
  <div class="col-6 last">
     col 6   
  </div> 
 <!-- Need to clear here -->
  <div class="col-4">
      col 4   
  </div>
  <div class="col-4">
      col 4  
  </div>
  <div class="col-4 last">
      col 4  
  </div>
  <!-- Need to clear here -->
</div> 

第6栏
第6栏
第4列
第4列
第4列

对于具有以下同级(不是最后一个子)的每个
.last
列,您可以简单地引入与下一个同级的清除:

.grid-row .last + div {
    clear: both;
}
对于最后一个子元素,您可以在
网格行
上使用clearfix
:after
伪元素:

.grid-row:after {
    content: '';
    display: table;
    clear: both;
}

或者你可以让
。网格行
后面的元素引入清除,方法与上面的第一条CSS规则大致相同。

你能发布一个提琴吗?你知道如何清除这个吗?Javascript?jQuery?我希望有一个CSS解决方案,但我认为这是不可能的。所以Jquery将是下一个选项。为什么不推荐
:在
上的
之后。网格行
?@bfrohs:实际上,仔细想想,它在这里是有意义的,因为它基本上与第一个CSS规则中的其他元素具有相同的用途。看起来可以做到这一点!将有一个进一步的发挥,然后标记它作为答案!非常感谢。