问题对齐布局中的元素

Question

这可能是一个难以解释的问题。

我似乎遇到了响应式元素的问题。我试图让我的元素遵循4列结构。

在左栏是一个副标题（称为“讨论”），然后剩下的3栏是与讨论主题的文本框。因此，副标题将出现在顶部，然后取决于有多少讨论主题取决于该部分的长度。

在此之后，我想要另一个相同的部分叫'社会'将遵循相同的格式。

问题是，当我尝试启动这个新的“社交”部分时，小标题与前面的“讨论”部分中的元素保持对齐。我尝试使用<divs>来创建一个新的容器，但无济于事。

对不起，如果这听起来令人困惑，但非常感谢任何帮助！

Answer 1

要么是大卫·曼库索说，或者添加以下你的CSS：

.four-col-grid::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

如果你所有的行在他们的类中都有相同的单词，你可以通过在你的选择器中查找一个关键字来捕获它们。 ike this：

[class*="col-grid"]::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

这会将:: after元素应用于每个包含“col-grid”类的元素。

或者只是做一个实用工具类，像“行”和类添加到每一行元素与这个CSS：

.row::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

这就是如何引导和大多数其他现代电网构架工作。

编辑： 为了说明，它的作用是在行元素后面创建一个全宽度的seudo元素，它不允许任何东西在它旁边浮动。从而迫使任何不适当的内容跳到一条线并开始它应该的位置。

Answer 2

之间的讨论“和 '社会' 补充：

<div class="clearfix"></div> 

添加对CSS：

.clearfix { clear: both; }