没有固定宽度的CSS布局

StackOverflow https://stackoverflow.com/questions/1606393

  •  05-07-2019
  •  | 
  •  

题

我在任何方面都不是CSS专家;我知道它在某种程度上但不是很深;浮动和IE6让我哭泣。所以我总是很高兴看到人们可以用它做什么。

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

但是，我真的很喜欢灵活的宽度。如此，我不明白为什么用表格进行设计是错误的？有一本名为<！>的书;你所知道的关于CSS的一切都是错的！<！>这解释了现在我们可以用最近的浏览器用CSS做表格布局是多么好......但是，我们不能一直用HTML表格来做这件事吗？是的，它不是CSS，也许不像纯CSS一样干净......但是，毕竟，表格布局 IS 我们经常需要的东西，如果我们必须在邪恶的hacky 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/物品的/ dev / layouttables1.asp

有帮助吗？

解决方案

你基本上是对的。只要对于可访问性，单元格的顺序适合于页面，使用表格进行布局就没有什么问题。我个人觉得固定宽度比可用于布局的表格更糟糕。

当您使用表格进行布局时，请确保使用样式width: 100%; table-layout: fixed（以及带有样式<col>的width），以便浏览器可以从一开始就正确地放置表格（修复了其中一个可用性问题表布局有），所以你不依赖于IE相当差的自动布局宽度猜测。

虽然我当然更喜欢CSS布局，并且只使用CSS（特别是IE5及其Quirky Box模型已经消失）可以合理地实现大多数简单的站点布局，但在某些情况下CSS无法破解它表可以。一个常见的情况是复杂的流体宽度形式。

最重要的问题是缺乏说出width: 100%-10em之类的内容来获取视口宽度减去另一列固定大小的列的能力。对于简单的情况，你可以使用边距和包装器div来解决这个问题，但是一旦你开始重新排序页面上的元素并添加多个包装器只是为了让CSS布局起作用，你就已经将表现与内容：与表格并没有太大不同。

在最糟糕的情况下，你最终会遇到那些愚蠢的<！>＃8216; CSS框架<！>＃8217;这需要您使用嵌套和固定类名来完全指定标记本身内的布局。这并不比桌子好;我觉得这绝对是一件非常滑稽的事情，这个对过去不好的日子的无望回归被认为是一种时髦的尖端Web 2.0技术。

CSS3正在研究一些有趣的替代方案，以解决当前的定位选项这一天实现了总标记和布局分离的承诺。但今天还有很长的路要走。

其他提示

查看 Yaml 和流体960gs 。两者都可以帮助您跨浏览器布局。表格布局不是答案，IE6迟早会消失。

除了表格数据之外，HTML表格还有其他原因。 HTML是数据内容的标记语言，因此应包含实际数据的分组，而不是该数据的布局。 CSS完全用于布局和样式目的;因此它的名字。因此，CSS应该包含网页的整个外观，而HTML包含数据的结构;从来没有两个人见面。

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

你应该把它看作是风格和内容之间的抽象，你可以从这里得到一个很好的概述： http://www.alistapart.com/articles/separationdilemma/

也直接回答你的问题转到'A List Apart'并搜索你的文章。它们描述了您即将在此进行的旅程： http://www.alistapart.com / articles / journey /

为什么我更喜欢将CSS转换为简单且可预测的解决方案？

这就是我们想说的。在短期内看起来似乎更容易，但是你写的任何内容都将更难以维护，并且将来更难编辑。你可以去编写一个在短期内看起来更容易的网页，但是当你想要做更多事情的时候，你只是在自己的脚下刺伤自己。为什么不在第一轮就做好呢？ （这只是额外的努力）

仅仅因为CSS布局对你来说是一个挑战，这不会使它不如表。通过陈述这一点，你犯下了一种被称为相对论谬误的逻辑谬误。

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

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

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

但你确定CSS有它的缺点。但表格还有更多，更糟糕。

您不希望使用表格作为布局的标记是因为设计和内容的分离。

您的标记应该独立存在，作为其中内容的完美描述。基本上你应该在触摸样式之前用html标记你的页面。然后，您将使用CSS来修改默认情况下语义标记的显示方式。

事实上，您正在布置的网络内容不是“表格数据” - 标记是供计算机/机器人阅读，样式供我们查看，混合两者只会混淆其中一个或两个各方，通常以可维护性为代价。

这是我个人遇到的一个场景，我喜欢这个场景。注意：我不是在提倡<！>“; no-table-at-all <！>”;它确实需要处理其他要求。

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

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标记更改来转换结构。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top