无法正确对齐DIV与CSS

我一直在一个网站上工作，一直在努力与CSS（我原本完成我的目标与JavaScript，但我有很多跨浏览器兼容性问题）。无法正确对齐DIV与CSS

我有4 ul s在我想根据屏幕大小对齐的页脚。

予适当地设定基于屏幕尺寸其宽度：

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

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

然而，它看起来是其中我有一个问题父容器内的元件的缠绕。

我想他们是什么样子是这样的： Desired Alignment

，而是，他们最终这样看： Undesired Alignment

我突出的元素的边框与红色显示他们如何对齐

我可以添加到我的CSS，使这些DIV对齐他们的方式我希望他们（我一直在寻找我的答案！）？

Here is my JSFiddle!

来源

2014-11-24 WebWanderer

尝试使用最小高度 – 2014-11-24 15:46:06

因为联系人div没有高度。 – dfsq 2014-11-24 15:46:41

看起来你需要寻找一个“等高”解决方案。 – 2014-11-24 15:48:17

现在我知道这是一个肮脏的黑客的一点点，它不会涵盖所有可能性，但给这一个尝试：

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

    ... 

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

    ... 

}

它可以在你目前的情况，但当涉及到添加更多色谱柱等时，不要拘泥于我。

JSFiddle

它作为第三个div，然后预计没有任何东西在左边推到左边，并把它放在其他2个div之下。

来源

2014-11-24 15:49:56 Stewartside

是的，它真的很脏劈。 @WebWanderer请避免它或至少把它作为最后的解决方案。 – Junaid 2014-11-24 16:05:21

讨厌使用肮脏的黑客，但没有完整的规范/ css /如何产生其难以真正指定哈哈。 – Stewartside 2014-11-24 16:08:58

嘿@Stewartside你没有“完整规范/ css /如何生成”的唯一原因是因为构成我的@media screen'查询的CSS块非常冗长。这些查询唯一控制的是'width'属性，所以只是忽略它们。如果你想查看其余部分，可以按照我提供的JSFiddle的链接（所关注的所有CSS位于顶部）。至于回答这个问题，有人已经通过评论给了我一个很好的解决方案，它只是要求我在'cmc-grid-pos'类中放置一个'min-height'属性 – WebWanderer 2014-11-24 16:19:28

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

.container { 
    display: table; 
} 

.column { 
    display: table-cell; 
}

在the example here看一看，把它应用到你的代码。

来源

2014-11-24 16:18:06

我遇到了一个问题，试图将所有'divs'放在一行中。答案虽然解决了，但有人发表解决方案作为评论，而不是答案。我只需要一个'最小高度' – WebWanderer 2014-11-24 16:24:25

好吧，我明白你的意思了，但你必须为这个最小重量选择正确的值，在显示的情况下：你的cmc-grid-posclass中的表将自动排列 – 2014-11-24 16:47:02

诚然，我并不是限制高度的最大粉丝，但我的名单不是动态构建的，并且不会很快改变。 – WebWanderer 2014-11-24 18:47:03

无法正确对齐DIV与CSS

回答

相关问题