問題對齊佈局中的元素

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; }