【发布时间】：2010-02-11 04:35:01
【问题描述】：
我想要一个很好的方法来制作具有任意数量的列的 css 布局。我需要较少使用 div 和 css 与语义编码。我需要固定宽度、居中站点和页脚的代码始终应位于底部。
我需要兼容所有主流浏览器，包括 IE 6 和 8。并且可以不使用 CSS Hacks 和 IE 条件 cmets 来实现
我尝试了 matheew james taylor 的布局，但它有一些额外的包装 div。
应该可以添加和删除任何列，尽可能减少对 css 和 xhtml 的更改。
布局1
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
布局 3
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 代码 sn-ps。
更新：
这是 3 col 布局的基础 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;}
【问题讨论】：
-
"我尝试了 matheew james taylor 的布局，但它有一些额外的包装 div。"那有什么问题？
-
Earlz - 他使用多个嵌套的 div 来实现布局 -我不确定你想要实现什么：基本上你想要一个带有 html 和 css 的灵活设计，但又要避免使用 div 和 css 样式。所有这些都与最大的浏览器支持相结合，并且没有任何黑客攻击。您能否阐明您的主要目标是什么以及为什么要求避免使用 div 或任何框架？您想要实现的目标和如何实现它似乎是非常矛盾的，如果没有深入研究这些可能性，我想知道您是否会找到一个可行且合适的解决方案。