响应式布局中的问题对齐元素答案

【问题标题】：Issue aligning elements in responsive layout响应式布局中的问题对齐元素
【发布时间】：2017-05-17 22:54:37
【问题描述】：

这可能很难解释。

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

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

在此之后，我想要另一个相同的部分，称为“社交”，它将遵循相同的格式。

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

如果这听起来令人困惑，我很抱歉，但非常感谢任何帮助！

【问题讨论】：

【解决方案1】：

按照 David Mancuso 所说的去做，或者将以下内容添加到您的 css 中：

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

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

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

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

或者，只需创建一个类似“row”的实用程序类，并使用此 css 将该类添加到每个行元素：

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

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

编辑：为了解释，它的作用是在行元素之后创建一个全宽的伪元素，它不允许任何东西在它旁边浮动。从而迫使任何浮动的内容跳下一行并从它应该开始的地方开始。

【讨论】：

【解决方案2】：

在“讨论”和“社交”之间添加：

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

添加 CSS：

.clearfix { clear: both; }

【讨论】：