Question

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

使用浮动并清除页脚似乎给出了我想要的两列布局。但我不确定IE6 / 7上的解决方案是多么“坚固”。

codepen上的代码。

Answer 1

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阅读有关“块格式化上下文”的内容。选择一种方法而不是另一种方法的原因有点微妙，选择取决于您要实现的布局细节，如何实现表现得很敏感，等等。

position：绝对内部位置：relative导致内容重叠

1 个答案: