Question

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

我所拥有的是一个非常简单的布局，包括一个主包装div，一个标题div，一个内容div和一个footer div。我遇到的问题是当我在内容div中放置一些正方形并将它们的位置设置为绝对时 - 以便将它们放在网格中，以便它们跨越内容div的整个宽度。当我将这些div设置为绝对时，页脚div跳起并且不会出现在位于其父内容div中的div网格下方。如果我将内容div的高度设置为一个值，则页脚div位于它应该的位置，但如果我没有或将其设置为auto（我想做），则页脚div有效地位于内容div之下。

我已经读过将设置为绝对设置从文档的正常流程中取出，但无论如何我可以设置内容div，以便内容div的高度由内容设置（即网格divs）以及页脚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。对于内容区域，您仍将获得类似的折叠高度 - 因为再次浮动部分从内容流中取出。但是，通过将overflow: hidden应用于内容区域，可以轻松解决此问题。

我已经为您的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实际上只应用于您特别想要从文档流中取出的项目，并且不会干扰其他任何内容。

直接的CSS布局

1 个答案: