页脚徽标未正确对齐并与页脚内容重叠

时间:2014-04-04 14:24:46

标签: html css responsive-design

我无法让我的网站上的页脚工作。页脚分为两部分。第一部分是mainFooter区域,第二部分是类似的版权区域。

我在版权区域中有徽标,在mainFooter中有徽标。我需要让它们中的两个始终对齐。它实际上是一个标识,但由于它是一个愚蠢的标志,因此分为两个页脚。

就是这样:

enter image description here

由于该行,我们必须将页脚分成两部分。但现在的文字"艺术"永远不会与建筑错位。

所以我的解决方案是在两个元素上使用绝对定位,右边设置:0 bottom:0并使用margin-top / bottom调整它们的位置。

问题是,这只适用于徽标真的很远而且与页面上其他内容没有真正对齐的情况,因为其他所有内容都是居中的。这就是我的意思:

enter image description here

就我个人而言,我并不太关心最右侧的徽标对齐,此时您已到达页面的末尾,它与内容中的内容不重叠。页脚仍然看起来很漂亮,但我们的客户设计师(不是网页)是这些东西的坚持者。

This is the dev site we're working on

有没有人对我们如何处理这个有任何想法?在页脚中添加徽标,但确保内容正确对齐并且与页脚中的内容不重叠?

1 个答案:

答案 0 :(得分:2)

在包含以下css的页脚内容(和徽标)周围放置一个容器div:

.container{
   width: 960px;
   margin: auto;
   position: relative;
}

现在,您的绝对定位元素将相对于此容器div定位,并且不会向右移动太远,而是保留在边界框中。