宽度未知的CSS浮动不会使用doctype包装空白

Question

两个div，左边浮动，宽度未知。其中一个内容比页面更适合，所以它移动到第一个以下（IE中除外）：

http://corexii.com/floatproblem/float.html

添加display：inline-table;并且大的内容包含其内容（一致地跨浏览器）：

http://corexii.com/floatproblem/table.html

但是介绍一个doctype（不仅仅是严格的，任何doctype），它在Firefox中不再存在：

http://corexii.com/floatproblem/doctype.html

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

Answer 1

  

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

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

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

Answer 2

CSS无法完成基于表格的布局所能完成的所有工作。首先，动态宽度布局要复杂得多。对于98％的情况，无表格布局仍然是可取的，但如果您真的需要这种动态宽度布局，则可能必须使用表格。

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

Answer 3

您可以先加一个BODY元素。

Traingamer已经向您解释了Firefox的行为以及需要采取哪些措施才能获得理想的结果。你可能会听他说，而不是关于CSS不可能用。创建布局。

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