HTML/CSS で安定した 2 列レイアウトを作成するにはどうすればよいですか?

HTML/CSS で安定した 2 列レイアウトを作成する

はじめに

安定した 2 列レイアウトを実現するHTML/CSS は、特に指定された制約を達成しようとする場合に課題を引き起こす可能性があります。ニュアンスと、ブラウザーのバリエーションの中でも安定性を確保するソリューションについて詳しく見ていきましょう。

対照的なソリューション

テーブルベースのソリューションが思い浮かぶかもしれませんが、多くの場合、それは崩れてしまいます。精査。たとえば、Safari では、コンテナが狭くなるにつれて固定幅の左列が縮小し、拡大するコンテンツに対応するのにテーブル幅のプロパティが苦労します。

Float の採用

Floated要素は安定したアプローチを提供します。次の解決策を考えてみましょう:

<div>

解決策の分解

• #left: 固定幅の左列を左にフローティング。その幅によってコンテナの最小サイズが定義されます。
• #right: 左の列の後ろから開始して、残りのコンテナの幅を埋めます。
• .clear:コンテンツが右の列にこぼれないようにする

安定性の維持

このソリューションは、一般的な落とし穴を回避することで安定性を維持します。

• フロートのクリアランスにより、右側の列が
• 右の列内のインライン要素によって、その列が決まります。 width.
• ブロックレベル要素は隣接する列にオーバーフローできません。
• フローティングおよびクリア技術により、スクロールバーと高さのオーバーフローが排除されます。

ブラウザの互換性

このソリューションは、IE8、Firefox 4、および Firefox 4 でテストおよび検証されています。 Safari 5、ブラウザ間の互換性を確保。

結論

フロート技術を採用することにより、このソリューションは、指定されたすべての要件を満たす安定した 2 列レイアウトを提供します。このソリューションは信頼性が高く堅牢であることが証明されており、一貫性のある適切に構造化されたレイアウトを維持しながら、さまざまなコンテンツやブラウザ環境に対応します。

以上がHTML/CSS で安定した 2 列レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。