Question

我在网站的几乎每个元素上使用绝对定位。它正在正常工作但是我遇到的唯一问题是，当我缩小页脚时，页脚仍然很好，但标题（#header）和内容（#content）向左侧移动。我正在使用margin：auto，甚至尝试使用Jquery将它们都集中在一起，但问题仍然存在。所以任何人都可以给我一个解决方案。我将不胜感激。

以下是网站：http://contestlancer.com/Trivia/

Answer 1

你应该把你的div在包装div中加上id“off”和“righter”，并给包装div赋予自动余量。

<div style="margin-left:auto;margin-right:auto;width:1024px;" > 
   <div id="aside"> </div>    
   <div id="righter"> </div>   
</div>

Answer 2

使用position:absolute时，您基本上完全控制了定位，这使得布局成为一项重要工作，因为您不会在浏览器中留下任何内容。

使用position:relative代替position:absolute。
使用top:0px;' on both #content and＃footer`。
使用％表示#header和#content中顶部的左边距和宽度，就像#footer中已经完成的那样。

#content的示例：

#aside
{
  top: 30px;
  float: left;
  display: inline;
  background-color: #F7B800;
  min-height: 500px;
  position: relative;
  border-radius: 9px;
  text-align: center;
  margin-left: 15%;
  left: 0;
  width: 30%;    
}

#righter {
  vertical-align: baseline;
  top: 0px;
  float: right;
  display: inline;
  left: 0px;
  position: relative;
  min-height: 550px;
  word-wrap: break-word;
  margin-right: 5%;
  width: 45%;
  margin-left: 5%;    
}

一个重要的事情是，这两个部分的margin-left，margin-right和width加起来为100％。

Answer 3

当我使用firebug检查您的网站时，它显示#logo，#navigation，#righter和#aside的像素设置为margin-left: ...px。

这意味着即使缩小或缩小，它们也总是具有设定像素数量的左边距。请尝试使用百分比。即：

#righter {
   left: 40%;
}

Answer 4

通常我会做什么，当有大量加载的混乱css和html混合时，我会用jquery强制它：

var w = $(window),
    el = $('#elementIwantToCenter');

//when first viewing the site => center el horizontally
el.css({position: 'absolute', left: (w.width()-parseFloat(el.css('width')))/2});

//when resizing browser window => center el horizontally
w.resize(function() {
  el.css({left: ($(this).width()-parseFloat(el.css('width')))/2});
});
w.trigger('resize');

示例：http://jsfiddle.net/XSDM7/

缩小时无法居中内容

4 个答案: