0

我有一个main我设置为的元素position: relative。这包含两个div我然后应用的 s position: absolute。然后，这会导致将main元素夹在中间的页眉和页脚然后相互碰撞。我怎样才能阻止这个？

使用浮动和清除页脚似乎给出了我想要的两列布局。但我不确定这个解决方案有多“坚固”，以及在 IE6/7 上会发生什么。

codepen上的代码。

4

1 回答 1

3

你所有的元素main都是绝对定位main的，所以高度计算为零，所以页眉的底边紧挨着页脚的顶边。如果您添加高度，main您将在页眉和页脚之间打开空间。

给定以下 HTML：

<header>Header</header>
<main>
  <div id="text">
    <p>Some text</p>
  </div>
  <div id="links">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </div>
</main>
<footer>
  <p>Footer</p>
</footer>

您可以使用浮动实现两列布局，如以下 CSS 所示：

main {
position: relative;
height: auto;
overflow: auto;
border: 1px solid blue;
}

#text {
float: left;
width: 500px
}

#links {
float: left;
width: 400px;
}

您需要overflow: auto在main容器上设置以包含浮动（相当于清除它们）。

另外，请确保浮动元素的宽度不要太宽，否则如果屏幕尺寸太窄，它们将换行到第二行。

请参阅http://codepen.io/anon/pen/gGsjd上的演示

脚注：使用溢出：自动与清除：两者

我倾向于使用overflow: auto，但在某些情况下，该clear属性是需要的。在某个时候，请在http://www.w3.org/TR/CSS2/visuren.html#block-formatting阅读有关“块格式设置上下文”的信息选择一种方法而不是另一种方法的原因有点微妙，而且选择取决于您尝试实现的布局的细节，它如何以响应方式表现等等。

于 2013-09-26T15:04:18.290 回答