如何在不使用'absolute'或'float'的情况下布局侧边栏和主体？

Question

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

如果我有3个div（左侧边栏，一个主体和一个页脚），我怎么能让侧边栏和主体坐在一起而不将它们的位置设置为“绝对”或浮动它们？执行这些选项中的任何一个都会导致页脚div没有被一个或另一个向下推。

无论在这些元素之前出现什么（比如另一个标题div或其他东西），我怎么能实现这个目标？

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

这是我目前设置的HTML的简化版本：

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

Answer 1

您需要指定页脚以清除浮动：

#footer{
 clear: both;
}

这迫使它在浮动元素下。

清除的其他选项是左右。

Answer 2

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

试试this tool

Answer 3

如果你不想漂浮任何东西，也不使用position：absolute，你现在很无望。

剩下的唯一选择是：

• 使用display：inline-block作为侧边栏和内容div（所有浏览器都不支持）
• 等待css advanced layout module或其他一些列模块（可能会永远占用）
• 回到使用表格