无法将DIV与CSS正确对齐

Question

我一直在网站上工作并且一直在努力学习CSS（我最初用JavaScript完成了我的目标，但我遇到了许多跨浏览器兼容性问题）。

我在页脚中有4 ul个，我想根据屏幕大小对齐。

我根据屏幕尺寸正确设置了宽度：

@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

它作为第3个div工作，然后期望左边没有任何东西将它推向左边并将其置于其他2个div之下。

Answer 2

只需使用容器的display: table;和内部div的display: table-cell;或display: table-row;：

.container {
  display: table;
}

.column {
  display: table-cell;
}

查看the example here并将其应用于您的代码。