html - 不同分辨率的 float 问题

Question

在不同的分辨率下，在左浮动 div 旁边底部的关键原因是什么。

来自:

+------------+     +-----------------------------+
| float: left|     |     float: right            |
+------------+     +-----------------------------+

收件人:

+------------+
| float: left|
+------------+
                   +-----------------------------+
                   |     float: right            |
                   +-----------------------------+

如何解决这个在任何分辨率下都会放在相同位置的问题？

DEMO CTRL+鼠标向上/向下滚动查看变化

请注意，我想以像素而不是指定宽度的百分比来修复它。

我还可以通过将 float 元素从左到右填充或将 float 元素从右到左填充设置为零来修复它。但为什么它在更小或更大的分辨率下表现不同？

Answer 1

两个元素的总宽度大于可用总宽度。它更像是:

来自:

+------------+     +-----------------------------+
| float: left|     |     float: right            |
+------------+     +-----------------------------+

至:(注意重叠部分)

+------------+
| float: left|
+------------+
             +-----------------------------+
             |     float: right            |
             +-----------------------------+

它们可能看起来并不重叠，但如果您将填充和边距考虑在内，它们就会重叠。如果您将宽度设置为百分比，它应该可以工作。