html - 異なる解像度でのフローティングの問題

Question

異なる解像度で左のフローティング div の隣に下に移動する主な理由は何ですか。

から：

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

に：

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

どの解像度でも同じ位置に配置されるこれを解決するにはどうすればよいですか?

デモ CTRL+マウス 上下にスクロールして変更を確認

指定された幅のパーセンテージではなく、ピクセル単位で修正したいことに注意してください。

また、浮動要素の左から右へのパディングを設定するか、浮動要素の右から左へのパディングをゼロで設定することによっても修正できます。しかし、解像度が小さい場合と大きい場合で動作が異なるのはなぜですか?

Answer 1

2 つの要素の幅の合計が、使用可能な幅の合計よりも大きくなっています。それはもっと似ています：

から：

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

宛先: (重複に注意してください)

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

重なり合っているようには見えないかもしれませんが、パディングとマージンを考慮に入れると重なります。幅をパーセンテージに設定すると、機能するはずです。