没有包装“行”容器的清理

Posted 2023-03-04

【中文标题】没有包装“行”容器的清理

【英文标题】：clearing without a wrapping 'row' container

【发布时间】：2014-10-15 08:15:57

【问题描述】：

有没有办法在每行没有包装容器的情况下清除行的最后一个元素？ 里面的列大小会有所不同，有一个“最后一个”类，我可以在那个 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> 

【问题讨论】：

你能发个小提琴吗？

您知道如何清除此问题吗？ javascript？ jQuery?

我希望有一个 CSS 解决方案，但我认为这是不可能的。所以 Jquery 将是下一个选择。

【参考方案1】：

对于每个有以下兄弟（不是最后一个孩子）的.last 列，您可以简单地引入下一个兄弟的间隙：

.grid-row .last + div 
    clear: both;

至于最后一个孩子，您可以在 .grid-row 上使用 clearfix :after 伪元素：

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

或者您可以让.grid-row 后面的元素引入清除，方法与上面的第一个 CSS 规则大致相同。

【讨论】：

你为什么不推荐:after .grid-row？

@bfrohs：实际上再想一想，这里是有道理的，因为它基本上与第一个 CSS 规则中的其他元素具有相同的目的。

看起来可以解决问题！将有进一步的发挥，然后将其标记为答案！谢谢。