宽度未知的 CSS 浮动不会用 doctype 包裹空格答案

【问题标题】：CSS floats with unknown widths don't wrap whitespace with doctype宽度未知的 CSS 浮动不会用 doctype 包裹空格
【发布时间】：2009-04-23 18:27:42
【问题描述】：

两个 div，向左浮动，宽度未知。其中一个的内容超出了页面的大小，因此它移动到第一个下方（IE 除外）：

添加显示：内联表；和大的包装它的内容（一致地跨浏览器）：

但是引入一个文档类型（不仅仅是严格的，任何文档类型）并且它不再在 Firefox 中：

如何获得正确的 div 来包装其内容，同时使用 doctype，并且可靠地跨浏览器？

【问题讨论】：

【解决方案1】：

如何获得正确的 div 来包装它使用文档类型时的内容同时，可靠地跨浏览器？

如果不定义宽度，你不能。在这种情况下，我建议使用百分比宽度，但这取决于您。

div 的默认宽度是其容器的 100%（在本例中为页面）。除非您将页面的大小设置为小于其固有宽度，否则第一个 div 将以实际大小结束。在没有完整且有效的文档类型的情况下期望跨浏览器的一致性是徒劳的。

【讨论】：

如果做不到，那么用纯CSS创建布局来替代旧的表格方法是不可能的。为什么规范明确不允许使用 CSS 进行布局？
好吧，CSS 已经到了那里，如果不是 Internet Explorer，我们现在都可以使用 CSS3，它允许您进行所有依赖于表格功能的设计。与此同时，我认为优秀的网页设计师有责任意识到 CSS 无法实现的功能，并设计出效果很好但不需要表格的东西……这确实包括大多数你能做到的设计认为 CSS 2.1 也很不错。所以，总而言之，这是微软的错。
使用纯 CSS 创建漂亮、有用、流畅的布局并非不可能。我们中的许多人一直这样做。如果不定义宽度，就不可能按照您的要求进行操作。这是一个完全不同的论点。

【解决方案2】：

CSS 不能完全做到基于表格的布局所能做到的一切。一方面，动态宽度布局要复杂得多。在 98% 的情况下，无表格布局仍然更可取，但如果您真的需要这种动态宽度布局，您可能必须使用表格。

不一致的宽度，如果不仔细比例，从美学的角度来看不是很好，所以你可能会解决错误的问题。

【讨论】：

【解决方案3】：

您可以从包含 BODY 元素开始。

Traingamer 已向您解释了 Firefox 的行为以及需要做什么才能获得您想要的结果。你可能会听他的，而不是直接说 CSS 无法创建布局。

不要将您因未遵守正确的网络规范而引入的问题归咎于 CSS。

【讨论】：

你根本没有贡献。很明显，这些是重现问题的最简单、简化的示例。当然，实际上我在设计一个真实的、符合标准的页面时遇到了这个问题。另外，如果您注意了，您会意识到我的 DESIRED 结果显然不可能仅使用当前实现的 CSS 来实现。 Traingamer 提供了一种解决方法，而不是解决方案。
不包含 BODY 标签会破坏布局，即使您不包含 doctype。这就是我提到它的原因。并且不要仅仅因为您没有提出解决方案就认为某事是不可能的：test.rottenrecords.com/test
这很好，感谢您的尝试，但是一旦您将所有内容包含在另一个 div 中，它就会再次中断（因此它可能对布局的最顶层有用，但不适用于任何嵌套元素)。此外，它会占用所有垂直空间，因此无法为其添加页眉或页脚。