ブラウザの互換性は常にCSSレイアウトで一般的な問題であり、初心者も多くの誤解を招くようになりました。
これらの2つの方法には次の利点があります。
1.ハックを使用する必要はありません
2。シンプルで効果的に、あなたはそれを一目で行うことができます
3。階層的およびモジュラーレイアウト
4.コードはより合理的で識別しやすい
方法1：内部と外部の間隔を追加することにより、浮動的な不整合を解く
通常、マルチカラムレイアウトを使用すると、フロートを使用する必要があります。
この効果を達成するために、マージンを追加して距離から直接柱を作成し、境界線に加えて、内部のテキストがフレームに近づかないようにパディングを追加します。しかし、コードが書かれた後、予想外の状況が発生しました。
3番目の列で、下に走ります。 これはあなたが望む効果ではありません。次に、分析しましょう。一般的なアイデアに従ってください。全体の幅は800px、左の列は200、中央400、右の列は200ですが、これらの列間に間隔がある必要があるため、左列190、中央400、変更する必要があります。そして、右の列190。大丈夫ですか？
しかし、見た目のために、あなたは国境を追加しました。ただし、境界線を忘れた後、フレームは幅を増やします。 168、誤整合しないように。しかし、あなたはそれを少し複雑だと思いませんか？このレイアウトのブラウザを表示することには違いがあります。
わかりました、それから私の方法を教えてください。階層によると、レイアウトとディスプレイを分離します。 レイアウトとは、幅とフロートに加えてせいぜい外側の間隔を追加することを意味するため、計算が簡単になります。次に、レイアウトの列にDIVを追加して、境界線、内部間隔などを表示します。幅を定義する必要はありません。適応できます。あなたの記憶を容易にするために、私は詩を即興で説明しました：固定幅は、境界やパッチなしで浮かんでいるはずです。
方法2：外層から内部浮動要素を解く
製品のカタログまたは画像アルバムを作成するために、ULまたはN DIVSを使用して、次のとおりです。
しかし、事態は私の期待に反しました。
これに対する解決策は実際には非常に簡単です。
1.フロートを追加できます。
2。別の方法は、フロートが終わった後、最後にフローティングをクリアするためにdivを配置することです。
3.外側の層に高さまたは幅を追加します。