無法正確對齊DIV與CSS

Question

我一直在一個網站上工作，一直在努力與CSS（我原本完成我的目標與JavaScript，但我有很多跨瀏覽器兼容性問題）。

我有4 ul s在我想根據屏幕大小對齊的頁腳。

予適當地設定基於屏幕尺寸其寬度：

@media screen and (min-width: 1281px){/*lg*/ 

    /*sm*/ 
    .cmc-grid-sm-1 { 
     width: 8.33333%; 
    } 
. . . 

然而，它看起來是其中我有一個問題父容器內的元件的纏繞。

我想他們是什麼樣子是這樣的：

，而是，他們最終這樣看：

我突出的元素的邊框與紅色顯示他們如何對齊

我可以添加到我的CSS，使這些DIV對齊他們的方式我希望他們（我一直在尋找我的答案！）？

Here is my JSFiddle!

Answer 1

現在我知道這是一個骯髒的黑客的一點點，它不會涵蓋所有可能性，但給這一個嘗試：

@media screen and (min-width: 482px) and (max-width: 1024px){ 

    ... 

    .cmc-column:nth-child(3n+3) { 
     clear:left; 
    } 

    ... 

} 

它可以在你目前的情況，但當涉及到添加更多色譜柱等時，不要拘泥於我。

JSFiddle

它作爲第三個div，然後預計沒有任何東西在左邊推到左邊，並把它放在其他2個div之下。

Answer 2

只需使用display: table;的容器和display: table-cell;或display: table-row;爲你內心的div：

.container { 
    display: table; 
} 

.column { 
    display: table-cell; 
} 

在the example here看一看，把它應用到你的代碼。