Question

我的页面有三列布局，左右列绝对定位，而中间列使用相对定位。所有三列应从页面顶部移除184px的距离，但由于某种原因，页面顶部与中间列之间的距离大于184px。我意识到中心列仍然在文档的正常流程中，但由于填充和边距都设置为零，因此标题和中心列应该是触摸的。知道发生了什么事吗？

body 
{
  padding:0px;
  margin:0px;
}

#header
{
  padding:0px;
  margin:0px;
  background-image:url(images/HeaderSlice.gif);
  background-repeat:repeat-x;
  height:184px;  
}

#centerCol
{
  position:relative;
  margin-left:200px;
  margin-right:200px; 
}


#leftCol
{
  position:absolute;
  top:184px;
  left:0px;
  width:200px; 
}

#rightCol
{
  position:absolute;
  top:184px;
  right:0px;
  width:200px;  
}

HTML文件：

    ...
<body>
  <div id="header">...</div>
  <div id="centerCol">...</div>
    ...

感谢名单

编辑：

现在有效。在#centerCol里面我有另一个div（id =“userManagement”），结果是#userManagement内部的上边距与#centerCol的上边距重叠

<div id="centerCol">
   <div id="userManagement">...</div>
</div>

#userManagement
{
   margin-top:16px;
   margin-left:10px; 
   font-size:12px;
}

谢谢大家帮助我

Answer 1

您可以使用html类标记来删除页面顶部可能添加的填充。这是由您的特定浏览器（Firefox？）引起的，因为chrome没有显示此行为。

那将是：

html, body 
{
      margin:0;
      padding:0;
}

Answer 2

一个。 #header可能包含导致溢出的内容 - 因此它会在其高度上扩展。尝试将“overflow：hidden”添加到#header元素。湾你确定centerCol的margin-top和padding-top设置为0吗？你的代码片段没有显示出来。

℃。使用FireBug在Firefox中打开页面，然后查看firebug窗口中的定位数据。它提供了对定位问题的深刻见解

这两个块元素之间不应该有任何空格

2 个答案: