如何在不使用 position:absolute 的情况下布局侧边栏和主体 还是说得使用 float 浮动?

发布于 2024-07-07 21:51:23 字数 507 浏览 45 评论 0原文

我一生都无法找到一种方法来完成这项工作。

如果我有 3 个 div(左侧边栏、主体和页脚),如何让侧边栏和主体彼此相邻而不将其位置设置为“绝对”或浮动? 执行这两个选项中的任何一个都会导致页脚 div 不会被其中一个或另一个按下。

无论这些元素之前是什么(例如另一个标题 div 或其他元素),我如何实现此目的?

如果有帮助,这里是我试图允许的两种情况的说明:

alt text

这是一个简化版本我当前设置的 HTML:

<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>

I can't for the life of me find a way to make this work.

If I have 3 divs (a left sidebar, a main body, and a footer), how can I have the sidebar and main body sit next to each other without setting their positions as "absolute" or floating them? Doing either of these options result in the footer div not being pushed down by one or the other.

How might I accomplish this regardless of what comes before these elements (say another header div or something)?

In case it helps, here's an illustration of the two cases I'm trying to allow for:

alt text

Here's a simplified version of the HTML I currently have set up:

<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

鲸落 2024-07-14 21:51:23

您需要指定页脚来清除浮动:

#footer{
 clear: both;
}

这会强制它位于浮动元素下方。

其他清除选项有左和右。

You need to specify the footer to clear the float:

#footer{
 clear: both;
}

This forces it under floated elements.

Other options for clear are left and right.

浸婚纱 2024-07-14 21:51:23

执行这些选项中的任何一个都会导致页脚 div 不会被其中一个或另一个按下?

尝试这个工具

Doing either of these options result in the footer div not being pushed down by one or the other?

Try this tool

逆光下的微笑 2024-07-14 21:51:23

现在,如果你不想浮动任何东西,也不想使用position:absolute,那你就非常绝望了。

剩下的唯一选择是:

  • 使用 display:inline-block 作为侧边栏和内容 div(并非所有浏览器都支持)
  • 等待 css 高级布局模块 或其他一些列模块(可能需要永远)
  • 返回使用表格

Right now you're pretty hopeless if you don't want to float anything, nor use position: absolute.

The only alternatives left are:

  • use display:inline-block for the sidebar and content divs (this is not supported by all browsers yet)
  • wait for the css advanced layout module or some other column module (will take forever probably)
  • go back to using tables
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文