没有固定宽度的CSS布局

我不是CSS的专家，我知道它在一定程度上但不是很深;浮动和IE6让我哭了。所以我总是很高兴看到人们可以用它做什么。没有固定宽度的CSS布局

但是，我看到的大多数示例都使用固定尺寸。据我所知，这是因为CSS非常棘手，当元素有宽度时更容易入侵，特别是在IE6中。

但是，我非常喜欢灵活的宽度。因此，我不明白为什么使用表进行设计是错误的？有一本书叫做“你知道关于CSS的一切都是错的！”这解释了现在我们可以用CSS和最近的浏览器做表格布局是好事情......但是，我们不能一直用HTML表格来做这件事吗？是的，它不是CSS，也许不是那样干净纯粹的CSS ...但，毕竟表格布局IS就是我们常需要的，如果我们有邪恶哈克CSS之间选择这样做，简单的，但是，不可─纯粹的HTML表格，我不明白为什么这些选择应该被认为是不好的。 KISS是件好事，不是吗？

或者，也许我不明白，你可以在CSS表样布局 - 在IE6的工作 - 没有的屁股太痛了？这样的网站的任何例子？

更新：是的，我知道内容和风格分离。事实上，我对DRY，SRP和其他设计必备的东西很狂热。这就是为什么我真的试图在CSS中做的事情;但如果它比表格更难以且更不可靠，甚至像上面提到的那样写在书中，为什么这么努力呢？我不是说所有的事情都必须在桌上完成;但如果它真的比CSS更容易 - 为什么我更喜欢CSS来一个简单和可预测的解决方案？

也就是说，我并不是说你总是应该使用表格。请记住主页面布局 - 它是独立的，不会影响其他页面，我可以在20分钟内从CSS切换到表格并返回（事实上我已经这样做了），没有任何问题 - 为什么我应该坚持使用CSS，即使表格是无害？

更新：我发现这是什么，我想说的一个很好的总结：http://www.flownet.com/ron/css-rant.html。并讨论http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments。

对于那些谁是有兴趣的，这里有一个更好的文章：http://kv5r.com/articles/dev/layouttables1.asp

来源

2009-10-22 queen3

”没有太多的屁股疼痛？“疼痛是非常主观的，是啊？ – 2009-10-22 10:52:18

不得不为不同的浏览器创建和维护CSS hack，这就是我所说的痛苦，而我只能放桌子而忘了它 - 它不那么痛苦或什么？ – queen3 2009-10-22 11:08:26

已在下面的帖子中回复了您的更新;你可以同意或不同意你的电话。 :) – 2009-10-22 11:14:00

你基本上是对的。只要对于可访问性，单元格的顺序适合页面，使用表格进行布局并没有什么错误。我个人发现固定宽度的可用性恶化比表格式更糟糕。

当你使用表格布局，确保从一开始就（其中修复的可用性问题表格布局有一个出正确使用的样式width: 100%; table-layout: fixed（和<col>与风格width），使浏览器可以摆桌子），这样你就不会依赖IE的相当糟糕的自动布局宽度猜测。

虽然我当然更喜欢CSS布局尽可能，并且最简单的站点布局可以合理地使用CSS实现（特别是现在IE5和它的Quirky Box模型不见了），但有些情况下CSS不能破解它和表可以。常见的情况是复杂的流体宽度形式。

最重要的问题是缺乏能力说出诸如width: 100%-10em之类的东西来获得一个列，该列是视口的宽度减去另一列的固定大小。对于简单情况，您可以使用边距和包装div来解决这个问题，但是一旦开始重新排序页面上的元素并添加多个包装器，以使CSS布局发挥作用，您就已经将演示文稿与内容：与表格没有太大区别。

在最糟糕的情况下，最终会出现那些愚蠢的“CSS框架”，它们要求您使用嵌套和固定类名来完全指定标记本身内部的布局。这根本不比桌子好;我发现这绝望的回归到糟糕的旧时代被认为是一种时髦的尖端Web 2.0技术是绝对有趣的。

CSS3正在研究一些有趣的alternatives目前的定位选项，可能有一天会提供总标记和布局分离的承诺。但今天还有很长的路要走。

来源

2009-10-22 11:47:05 bobince

看一看Yaml和Fluid 960gs。这两种功能都可以帮助你跨浏览器布局。表格布局不是答案，IE6迟早会消失。

来源

2009-10-22 10:52:57

这是罕见的答案之一，是有益的，并回答我的问题;-) – queen3 2009-10-22 11:17:11

YAML - 慢。 FireFox在滚动其表单示例时遇到了很大的问题。 – queen3 2009-10-22 11:38:07

960看起来不错，但似乎并不明显易于学习。我必须进行调查，但谢谢。 – queen3 2009-10-22 11:43:43

你不想做一个使用表格作为布局是因为设计和内容的解耦标记的原因。

您的标记应该坐下，对自己，因为这是它的内容的完美的描述。基本上，你应该在你触摸样式之前在html中标记你的页面。然后，您将使用CSS来修改默认情况下语义标记的外观。

问题的实质是，你所设计的网页内容不是'表格数据' - 标记是用于计算机/机器人阅读，风格让我们看到，混合两者只是混淆一个或双方通常都会增加维护成本。

来源

2009-10-22 10:55:33

还有一个原因是HTML表是坏的任何东西比表格数据等。 HTML是数据内容的标记语言，因此应该包含实际数据的分组，而不是该数据的布局。 CSS旨在完全用于布局和样式目的;因此它的名字。因此，CSS应该包含网页的整个外观，而HTML包含数据的结构;永远不会有两个人见面。

在表格中做所有事情都是有原因的。

你应该把它看作是风格和内容之间的抽象，你可以从这里得到很好的破败：在直接回答http://www.alistapart.com/articles/separationdilemma/

而且你的问题转到“列表除了”，并通过您的文章进行搜索。他们描述你将要在这里做的旅程：http://www.alistapart.com/articles/journey/

为什么我更喜欢CSS来一个简单和可预测的解决方案？

这就是我们要说的。在短期内看起来似乎更容易，但是你写的任何东西在将来都不易维护和编辑。你可以去写一个短期看起来更容易的网页，但是当你想要做更多的事情时，你只是在真正地将自己刺入脚中。为什么不在第一时间做对？（真的只是少量的额外努力）

来源

2009-10-22 10:56:04

因为YAGNI（你不需要它）仍然适用于这里。桌子上做起来容易得多。如果（并且只有）我不能在表格中做，我会切换到CSS（当然要求智能CSS设计者）。我不是说这应该是为了一切;我总是尝试使用CSS;但对于母版页中单个实例的网站布局，并不影响任何内容 - 为什么我应该打扰？我会很容易地将其转换为CSS，而不会影响任何内容 - 如果需要的话。但我不会做过早的优化...... CSS-zation。 – queen3 2009-10-22 11:20:01

这里有一段引用来自您的旅程链接：“例如，WaSP的网站一直遵循标准，并一直使用CSS来控制它的排版，但是布局是用HTML表格完成的，所以网站可以在任何桌面上运行浏览器。“咦？ – queen3 2009-10-22 11:25:35

@ queen3旅程文档已经有8年多了，当时面对高剂量CSS时自动点燃的浏览器仍然比较普遍。 – fvu 2009-10-22 11:52:48

这是我个人遇到的情景，我会喜欢这个分享。请注意：我并不是主张“无表格”，它确实可以满足其他要求。

我创建了一个表格（视觉自上而下流）：由于我没有使用的表

Heading1 
Label1 Textbox1  Label2 Textbox2 

Heading2 
Label3 Dropdown3 Label4 Textbox4 
Label5 Textbox5

：

Heading1 
Label1 
Textbox1 
Label2 
Textbox2 

Heading2 
Label3 
Dropdown3 
Label4 
Textbox4 
Label5 
Textbox5

然后客户想要一个更有条理的管状一个这样的TR TD排序，我可以轻松（几乎）使用CSS修改和轻微的HTML标记更改来转换结构。

来源

2009-10-22 11:02:28

我的问题出于同样的原因（除其他外），客户想重组网站。我发现调整master page和site.css比ONLY site.css更容易。对我来说，转换为表格结构是一个简单的答案。在你的情况下，我会有几个TD与旧的ID - 所以几乎所有的CSS仍然适用，并且很容易像新设计那样安排桌子。而且由于页面布局和CSS一起工作，我不明白为什么我应该争取纯CSS解决方案，以便我不必触摸HTML标记。 – queen3 2009-10-22 11:16:34

@ queen3：是的，你有你的观点。对于我的情况，我已经将标记与HTML一起编程。因此，设计人员可以在不触及（几乎）表单文件本身的情况下处理CSS文件。就像我说的，我并不是说CSS布局是唯一的出路，“传统”表格仍然可以提供更好的信心和控制感（在某些方面）。 – 2009-10-22 12:34:19

仅仅因为CSS布局对你来说是一个挑战，那并不能使它低于表格。通过说明这一点，你犯了一个被称为相对主义谬误的逻辑谬误。

一旦你完全理解CSS，如何使用它，以及大多数不同的浏览器怪癖，你会发现它远远优于HTML表格。

标记应该是语义的。也就是说，它应该准确地描述它包含的内容。这使得它机器可读（对于SEO和其他应用程序）。用于布局的表格根本不是语义的。

不同层次的抽象有助于使网站更容易维护。保持HTML中的内容，Javascript中的行为以及CSS中的表示。

虽然你说的CSS有其不足之处。但桌子有更多，这更糟糕。 “

来源

2009-10-23 00:56:02

我不同意表格的布局不是语义的。他们是 - 我想可能布局是表格式的，顶部有3个单元格，底部有两个单元格......这是我的布局的语义，而不是5个div。 CSS发明了表格布局的事实证明了这一点。实际上，我并不孤单，引用如下：“这很容易的原因是表格具有正确的布局语义，CSS不支持”。（c）flownet.com/ron/css-rant.html。 – queen3 2009-10-23 10:55:48

是的，表格不允许重新安排CSS，所以用户缺乏这种能力......等等......但除非我知道用户需要这样做（因为我使用IE6，所以您可以对企业用户进行映像）我为什么要打扰？ – queen3 2009-10-23 10:57:01

您可以发布一些链接到您认为在CSS中不可执行的设计吗？ HTML中的语义与您的“布局”的“语义”无关。这是关于你的内容的语义......这是一个标题，这是一个段落，等等。一个表格是表格数据。这就是W3C规范所说的。 – 2009-10-24 01:43:16

没有固定宽度的CSS布局

回答

相关问题