1

我确定以前有人问过这个问题，但我真的很想知道为什么它正在做它正在做的事情，而不仅仅是答案（如果有的话）。

目前我得到的是一个非常简单的布局，它由一个主包装 div、一个标题 div、一个内容 div 和一个页脚 div 组成。我遇到的问题是当我在内容 div 中放置一些正方形并将它们的定位设置为绝对位置时 - 以便将它们布置在网格中，以便它们跨越内容 div 的整个宽度。当我将这些 div 设置为绝对时，页脚 div 会跳起来，并且不会出现在位于其父内容 div 中的 div 网格下方。如果我将内容 div 的高度设置为页脚 div 应位于的值，但如果我不设置或将其设置为自动（如我所愿），则页脚 div 有效地位于内容 div 下方。

我已经读过将任何内容设置为绝对会使其脱离文档的正常流程，但是无论如何我可以设置内容 div 以便内容 div 的高度由内容设置（即 div 的网格）和还让页脚 div 始终位于内容 div 下方？

这是一个模拟http://jsfiddle.net/M4jyH/3/

这是我的代码

#wrapper {
width: 400px;
height: auto;
border: 1px solid #000; 
margin: 10px auto;   
padding: 10px;    
}

#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}

#content {
position: relative;
width: 100%;
/*height:92px;*/

border: 1px solid #000; 
margin: 10px 0px 0px 0px;        
}

.box {
position: absolute;
width: 92px;
height: 92px; 
background-color: #999;    
}

#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000; 
margin: 10px 0px 0px 0px; 
}


<div id="wrapper">

<div id="header">header</div>

<div id="content">

    <div class="box" style="top:0px; left:0px;"></div>
    <div class="box" style="top:0px; left:102px;"></div>
    <div class="box" style="top:0px; left:205px;"></div>
    <div class="box" style="top:0px; left:308px;"></div>

</div>

<div id="footer">footer</div>

</div>​
4

1 回答 1

2

您不需要使用position: absolute内部元素，将它们水平放置只需使用float: left边距作为间距。对于内容区域，您仍然会得到类似的折叠高度 - 因为浮动再次部分地从内容流中取出。但是，这很容易通过应用于overflow: hidden内容区域来解决。

我为您的box元素添加了 first 和 last 类，只是为了使处理边距更容易：

<div id="content">
  <div class="box first"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box last"></div>
</div>

我还更改了您的 CSS 项目，如下所示：

#content {
  overflow: hidden; /* <-- added overflow hidden */
  position: relative;
  width: 100%;
  outline: 1px solid #000;
  margin: 10px 0px 0px 0px;        
}

.box {
  float: left; /* <-- replaced pos abs with float left */
  margin-right: 10.5px; /* <-- added a specific margin */
  width: 92px;
  height: 92px;
  background-color: #999;    
}

.box.last {
  margin-right: 0px;
}

关于使用10.5px边距，最好重新评估使用的尺寸，这样就没有必要了。然而，大多数现代浏览器都会正确处理这个问题。

http://jsfiddle.net/M4jyH/5/

position: absolute实际上应该只用于您特别希望从文档流中取出的项目并且不干扰其他任何事情。

于 2012-11-25T02:24:53.123 回答