Question

现在我有这样的事情：

<div id="pagebody">
    <div id="left-entries"> </div>
    <div id="right-entries"> </div>
</div>

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

left-entries和right-entries有float: left;，以便它们在pagebody内显示在彼此旁边。

pagebody有margin-left: auto; margin-right: auto;，因此它位于中心。

如何让footer始终显示在pagebody下？现在，它有点落后于一切。我有一种感觉，因为pagebody没有定义的高度（因为高度是由里面的内容定义的，而变量取决于内容）。

有什么想法吗？

Answer 1

如果您将clear:both;添加到#footer，它将始终位于pagebody

之下

Answer 2

你必须清除它。

clear: both;

Answer 3

我建议清除漂浮的DIV。您可以通过添加包含任何浮动子项的任何父元素的“clear”类来完成此操作。我认为这最有效，因为它在HTML中的标记较少。（通过Nicolas Gallagher）

例如：

<style>
    .clear:before, .clear:after { content:""; display:table; }
    .clear:after { clear:both; }
    .clear { zoom:1; } /* IE 6/7 (hasLayout) */
</style>

<div id="pagebody" class="clear">
    <div id="left-entries"> </div>
    <div id="right-entries"> </div>
</div>

应清除#pagebody DIV下的任何内容。

div保持在我页面上所有其他div之下

3 个答案: