css - 使用任意数量的列进行 css 布局的最佳策略是什么？

Question

我想要一个好的方法来制作具有任意数量列的 css 布局。我需要更少地使用 div 和 css 进行语义编码。我需要固定宽度、居中站点和页脚始终应位于底部的代码。

我需要与包括 IE 6 和 8 在内的所有主流浏览器兼容。并且可以在不使用 CSS Hacks 和 IE 条件注释的情况下实现

我试过 matheew james taylor 的布局，但它有一些额外的包装 div。

在 css 和 xhtml 中尽可能少的更改应该可以添加和删除任何列。

布局一

           Header 

h o r i z o n t a l   m e n u

Left Col  Main Col  Right Col

           Footer

布局 2

           Header

h o r i z o n t a l   m e n u

Left Col  M a i n C o l u m n 

           Footer

布局三

           Header

h o r i z o n t a l   m e n u

Col 1   col 2   col 3   col 4 

           Footer

虽然我知道并在网上尝试了很多解决方案，但想知道 SO 用户的一些输入。

我需要一个好的方法，然后我将在所有元素中使用相同的方法。我已经尝试过许多基于网格的框架，但我不想使用它们。所以don't suggest any Grid based CSS framework .任何在线 css 布局生成器都可以做到这一点。或者，如果只能手动操作，请给我一个 xhtml 和 css 代码片段。

更新:

这是 3 列布局的基础 css，现在应该包括什么。

#page_container{width:970px;margin:0 auto;}
#header{height:150px;background:#999;}
#left_column{width:180px;background:#CCC;}
#center_column{width:400px;background:#ECECEC;}
#right_column{width:180px;background:#CCC;}
#footer{height:150px;clear:both;background:#999;}

Answer 1

我知道您说过不建议使用基于网格的 CSS 框架，但这几乎正是您想要实现的目标。如果现有框架不适合您，也许您应该打开它们的源代码并查看它们是如何实现效果的 - 然后根据您自己的需要对其进行调整。