Web 应用程序的纯 CSS 布局？答案

【问题标题】：pure css layout for a web application?Web 应用程序的纯 CSS 布局？
【发布时间】：2009-12-30 18:15:13
【问题描述】：

我正在开发一个当前具有基于表格布局的网络应用程序。理想情况下，我想使用纯 css，或者不使用混合表和 css 布局*。

我试图理解 css 布局和定位，我的头撞到了墙上。我遇到的主要问题是，根据应用程序的状态，我在布局的“部分”中出现了不同的东西——可能包含在 div 或 table 中。例如，我可能有一些文本和链接，然后在用户交互之后，可能会有一个表单、一个表格、一些图像、不同的文本等。任何时候我找到一个 css 解决方案，它都是针对固定元素布局的，或在特定情况下工作等。换句话说，它们不是可靠的解决方案。

从这篇 In Search of the One True Layout 中，作者关于“跨网格/列垂直放置元素”：“设计师面临选择依赖于特定高度的元素、求助于表格或根本不打扰的选择。”这是真的？在我的应用中，我不能依赖特定高度的元素。

当我拥有不同高度的元素时，我是否会求助于表格（实际上，这在网站上占了相当大的比重）。我注意到相当多的网站由受人尊敬的人和组织在某些地方使用表格进行布局，而不仅仅是表格数据！包括这个网站。

【问题讨论】：

标签： css web-applications layout

【解决方案1】：

有可能有 CSS 技术可以实现您想要的，但如果您不熟悉使用 CSS 进行复杂布局，它们可能并不明显。

在您的情况下，为了“完成”，我建议使用混合类型的布局，并且对于使用表格来布局需要这些特定行为的应用程序部分并不会感到难过。

如果它比表格特别复杂和困难，即使对于 CSS 专家来说，它也可能是最好和最简单的方法。

【讨论】：

【解决方案2】：

仅当您需要实现 soem 排序或背景图像的特殊效果时，动态高度才是问题，并且通常有解决方法。这实际上取决于视觉设计以及需要做什么才能使每个“块”灵活使用。有时事情是不可能的，但大多数时候它们是可能的——它们只是倾向于增加标记的复杂性。但即使是增加的复杂性对我来说也比嵌套表更容易理解:-)

【讨论】：

【解决方案3】：

如果你想完成任务并在 CSS 布局、浏览器兼容性、CSS 重置、字体上花费大量时间，我的建议是：

编写简单、有效、语义化的 HTML
使用简单的 CSS 框架（如 blueprint）。您将依靠简单的网格系统进行定位和布局。
将 CSS 类添加到您的 HTML 中
为颜色、背景添加自定义 CSS...

请重新考虑使用表格布局“完成它”；你会失望的，特别是如果你想在以后添加一些 JS 魔法。

【讨论】：

等等 - 你是在提倡语义化的 HTML 和蓝图，这完全违背？
@meder：不完全正确。您可以在开发中使用网格类，然后使用命令行工具将它们汇总为语义类。我真的不提倡这样做来替换每个span-*，但我通常会为主要和模板布局的顶级块以及固定宽度的“小部件”这样做。
忘了说您需要将 compress.rb 用于语义命名空间。 jdclayton.com/blueprints_compress_a_walkthrough.html

【解决方案4】：

我为我的网络应用使用 CSS 布局。但是，我的应用没有大量不同的信息，因此我可以设置内容区域，而不必担心布局看起来“关闭”，因为一列与其余内容不平衡。

如果您在 CSS 布局和定位方面遇到问题，我建议您先使用表格，了解有关 CSS/HTML 定位的更多信息，然后再转换您的布局。我敢肯定，这是为了在“真实”项目中学习 CSS 带来令人沮丧的体验。

同时，获取一些非常好的 CSS 资源：Andy Budd、Simon Collison、Eric Meyer 等的书籍。人。此外，访问他们的博客并挖掘档案。 APress 的Beginning CSS Web Development by Simon Collison 是一本关于 CSS 布局、定位和一般用途的非常好的书。所有细节都带有出色的工作示例。

【讨论】：