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

Question

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

添加显示：内联表；并且大的包装了它的内容（在浏览器中始终如一）：

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

不要因为不遵守正确的 Web 规范而引入的问题归咎于 CSS。

3 回答 3