Web应用程序的纯CSS布局？

Question

我正在开发一个目前有基于表格的布局的网络应用。理想情况下，我想转向纯粹的CSS，或者失败，这是一种混合的表格和CSS布局*。

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

从这里寻找一个真正的布局，作者关于“跨网格/列的元素的垂直放置”：“设计师面临选择依赖于特定高度的元素，使用表格或根本不打扰。”这是真的？在我的应用程序中，我不能依赖于特定高度的元素。

当我有各种各样的hieghts元素时（实际上是相当多的网站），我是否会退回到桌面上。我注意到，备受尊敬的人和组织完成的相当多的网站在某些地方使用表格进行布局，而不仅仅是表格数据！这个网站包括在内。

Answer 1

有可能有CSS技术可以达到你想要的效果，但如果使用CSS进行复杂的布局对你来说可能并不明显。

在你的情况下，为了“完成它”，我建议使用混合类型布局，并且不要因为使用表来布局需要这些特定行为的应用程序部分而感到不舒服。

如果 特别复杂和困难，那么表格可能是最好也是最简单的方法，即使是CSS专家也是如此。

Answer 2

动态高度只是一个问题，如果你需要实现soem sort或背景图像的特殊效果，并且有很多方法可以解决这个问题。它实际上取决于视觉设计以及需要做些什么来使每个“块”灵活使用。有时事情是不可能的，但大部分时间它们都是 - 它们往往会增加标记的复杂性。但是，即使增加了复杂性，我也比嵌套表更容易理解： - ）

Answer 3

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

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

请重新考虑使用表格布局'来完成';你会很失望的，尤其是如果你想稍后添加一些JS魔法。

Answer 4

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

如果您在CSS布局和定位方面遇到问题，我会先建议表格，了解有关CSS / HTML定位的更多信息，然后再转换您的布局。我确信这是在一个“真实”项目中学习CSS的令人沮丧的经历。

与此同时，获得一些非常好的CSS来源：Andy Budd，Simon Collison，Eric Meyer等人的书。人。此外，访问他们的博客并深入了解档案。一本非常好的CSS布局，定位和一般用途的书是来自APress的Beginning CSS Web Development by Simon Collison。所有的细节都有很好的工作实例。