无固定宽度的CSS布局

我不是CSS方面的专家；我知道一些，但不是很深；漂浮和IE6让我哭泣。所以我总是很高兴看到人们能用它做些什么

然而，我看到的大多数示例都使用固定尺寸。据我所知，这是因为CSS非常复杂，当元素有宽度时，尤其是在IE6中，它更容易被破解

但是，我真的很喜欢灵活的宽度。既然如此，我不明白为什么用桌子做设计是错误的？有一本书叫《你所知道的关于CSS的一切都是错误的！》，这本书解释了现在我们可以在最新的浏览器中使用CSS进行表格布局是多么的好。。。但是，我们不能一直使用HTML表吗？是的，它不是CSS，也可能不像纯CSS那么干净。。。但是，毕竟，表布局是我们经常需要的，如果我们必须在邪恶的黑客CSS和简单但不够纯粹的HTML表之间进行选择，我不明白为什么这些选择都应该被认为是不好的。接吻是件好事，不是吗

---

或者，也许我不明白，你可以在CSS中制作类似表格的布局——在IE6中也可以——而不会有太多麻烦？有这样的网站吗

更新：是的，我知道内容和样式分离。事实上，我热衷于DRY、SRP和其他设计必须做的事情。这就是为什么我真的尝试用CSS做事情；但如果它比表格更难，更不可靠，甚至写在上面提到的书中，为什么要这么努力呢？我并不是说每件事都必须在桌子上完成；但是，如果它真的比CSS更容易，为什么我更喜欢CSS而不是简单和可预测的解决方案呢

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

更新：我发现这是我想说的一个非常好的总结：。以及讨论

---

对于那些感兴趣的人，这里有一篇更好的文章：

看看和。这两种方法在跨浏览器布局方面都有很大帮助。表布局不是答案，IE6迟早会消失。

您不想将表作为布局进行标记的原因是设计和内容的脱钩

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

---

事实上，您正在布局的web内容不是“表格数据”——标记是供计算机/机器人阅读的，样式是供我们查看的，将两者混合在一起只会混淆一方或双方，通常会增加可维护性成本

HTML表格对于表格数据以外的任何其他数据都是有害的，这是有原因的。HTML是数据内容的标记语言，因此应该包含实际数据的分组，而不是该数据的布局。CSS完全用于布局和样式目的；因此它的名字。因此，CSS应该包含网页的整个外观，而HTML包含数据的结构；两人永远不会相遇

在桌子上做任何事情都是不好的，这是有原因的

你应该把它看作是风格和内容之间的抽象，你可以从这里得到一个很好的概述：

另外，为了直接回答您的问题，请转到“单独列表”并搜索您的文章。他们描述了你将要在这里进行的旅程：

为什么我更喜欢CSS而不是简单可预测的解决方案？

---

这就是我们想说的。从短期来看，这似乎更容易，但您编写的任何内容都将变得不易维护，将来也更难编辑。你可以去写一个短期内看起来更容易的网页，但你只是在为以后你想做更多的事情而刺伤自己的脚。为什么不在第一轮就做对呢？（实际上，这只是一小部分额外的努力）

以下是我个人遇到的一个场景，我希望分享。注意：我并不是在提倡“完全没有桌子”，它确实是为了满足其他需求而提供的

我创建了一个表单（视觉上是自上而下的流程）：

然后，客户想要一个更结构化的管状结构，如下所示：

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

---

由于我没有使用TR-TD排序的表，我可以使用CSS修改和HTML标记的微小更改轻松（几乎）转换结构。

你基本上是对的。使用表格进行布局并没有什么错，只要为了便于访问，单元格的顺序适合页面。我个人认为固定宽度比布局表的可用性要差得多

使用表格进行布局时，请确保使用样式

width:100%；表布局：修复了
（和
，设置了
宽度的样式），这样浏览器就可以从一开始就正确地布局表（这修复了表布局存在的一个可用性问题），并且您不必依赖IE的自动布局宽度猜测功能

虽然我当然更喜欢尽可能使用CSS进行布局，而且大多数简单的站点布局都可以合理地使用CSS来实现（尤其是现在IE5及其古怪的盒子模型已经消失），但也有一些情况下CSS无法破解，而表可以。一种常见的情况是复杂的流体宽度形式

最重要的问题是，无法说出诸如
width:100%-10em
之类的内容来获取一列，该列等于视口的宽度减去另一列的固定大小。对于简单的情况，您可以使用边距和包装器div来解决这个问题，但是一旦您开始对页面上的元素进行重新排序
Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5