css - 直接的 CSS 布局

Question

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

目前我得到的是一个非常简单的布局，它由一个主包装 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>​

Answer 1

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

我已将 first 和 last 类添加到您的 box 元素中，只是为了更容易处理边距:

<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 实际上应该仅用于您特别希望从文档流中删除的元素，并且不要干扰其他任何内容。