Question

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

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

在左栏中，它是一个副标题（称为＆＃39;讨论＆＃39;），其余3列是带有讨论主题的文本框。因此，子标题将出现在顶部，然后取决于讨论主题的数量将取决于该部分的长度。

在此之后，我想要另一个名为＆＃39; social＆＃39;它将遵循相同的格式。

问题是当我尝试开始这个新的社交活动时。在该部分中，副标题始终与前一个讨论中的元素保持一致。部分。我尝试使用<divs>创建一个新容器，但无济于事。

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

Answer 1

在'讨论'和'社交'之间添加：

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

添加CSS：

.clearfix { clear: both; }

Answer 2

要么像David Mancuso所说，要么将以下内容添加到你的CSS中：

cross

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

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

这会将:: after元素应用于包含＆＃34; col-grid＆＃34;的类的每个元素。

或者只是创建一个类似＆＃34; row＆＃34;的实用程序类。并使用此css将该类添加到每个行元素：

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

这就是bootstrap和大多数其他现代网格框架的工作方式。

编辑：为了解释，这样做是因为它在行元素之后创建了一个全宽度的seudo元素，它不允许任何东西在它旁边浮动。从而迫使任何浮动的内容跳出一条线并从它应该的位置开始。