让一个 div 保留在页面上所有其他 div 的下方

发布于 2024-12-14 17:42:49 字数 605 浏览 1 评论 0原文

现在我有这样的东西：

<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 有 margin-left: auto; margin-right: auto; 使其位于中心。

如何让 footer 始终显示在 pagebody 下？现在它的位置有点落后于一切。我有一种感觉，这是因为 pagebody 没有定义的高度（因为高度是由其内部内容定义的，并且根据内容而变化）。

有什么想法吗？

原文

Right now I have something like this:

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

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

left-entries and right-entries have float: left; so that they show up beside each other within pagebody.

pagebody has margin-left: auto; margin-right: auto; so that it sits in the center.

How can I get footer to ALWAYS show up under pagebody? Right now it is positioned somewhat behind everything. I have a feeling it is because pagebody doesn't have a defined height (because the height is defined by what is inside it and that's variable depending on the content).

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你不是我要的菜∠ 2024-12-21 17:42:55

你必须清除它。

clear: both;

You have to clear it.

clear: both;

回复收藏 0 原文

深白境迁sunset 2024-12-21 17:42:54

我建议清除您的浮动 DIV。您可以通过向任何包含浮动子元素的父元素添加“清除”类来实现此目的。我认为这种方法效果最好，因为 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 下面的所有内容。

I would recommend clearing your floated DIV's. You can do this by adding a "clear" class any parent elements that contains any floated children. I think this works best, because it's less markup in your HTML. (via Nicolas Gallagher)

For example:

<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>

Should clear anything below the #pagebody DIV.

回复收藏 0 原文