无法正确对齐DIV与CSS
我一直在一个网站上工作,一直在努力与CSS(我原本完成我的目标与JavaScript,但我有很多跨浏览器兼容性问题)。无法正确对齐DIV与CSS
我有4 ul
s在我想根据屏幕大小对齐的页脚。
予适当地设定基于屏幕尺寸其宽度:
@media screen and (min-width: 1281px){/*lg*/
/*sm*/
.cmc-grid-sm-1 {
width: 8.33333%;
}
. . .
然而,它看起来是其中我有一个问题父容器内的元件的缠绕。
我想他们是什么样子是这样的:
,而是,他们最终这样看:
我突出的元素的边框与红色显示他们如何对齐
我可以添加到我的CSS,使这些DIV对齐他们的方式我希望他们(我一直在寻找我的答案!)?
现在我知道这是一个肮脏的黑客的一点点,它不会涵盖所有可能性,但给这一个尝试:
@media screen and (min-width: 482px) and (max-width: 1024px){
...
.cmc-column:nth-child(3n+3) {
clear:left;
}
...
}
它可以在你目前的情况,但当涉及到添加更多色谱柱等时,不要拘泥于我。
它作为第三个div,然后预计没有任何东西在左边推到左边,并把它放在其他2个div之下。
是的,它真的很脏劈。 @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看一看,把它应用到你的代码。
我遇到了一个问题,试图将所有'divs'放在一行中。答案虽然解决了,但有人发表解决方案作为评论,而不是答案。我只需要一个'最小高度' – WebWanderer 2014-11-24 16:24:25
好吧,我明白你的意思了,但你必须为这个最小重量选择正确的值,在显示的情况下:你的cmc-grid-posclass中的表将自动排列 – 2014-11-24 16:47:02
诚然,我并不是限制高度的最大粉丝,但我的名单不是动态构建的,并且不会很快改变。 – WebWanderer 2014-11-24 18:47:03
尝试使用最小高度 – 2014-11-24 15:46:06
因为联系人div没有高度。 – dfsq 2014-11-24 15:46:41
看起来你需要寻找一个“等高”解决方案。 – 2014-11-24 15:48:17