HTML は 2 列レイアウトを実装し、左側は固定幅、右側はアダプティブ幅になります。
実装 1: <style> body, html{padding:0; margin:0;} // CSS の配置に従って、フローティングまたは絶対配置を使用して、左側のブロック要素を通常のドキュメント フローから分離し、右側のブロック要素 div と並べることができます。 nth-of -type(1){ float: left; // 位置: 絶対位置を使用します。 // 左: 0; 背景:赤; } // [ブロックレベルの要素。デフォルトで親要素の幅が自動的に埋められ、1 行を占有します] // 現在: 右のブロック要素の幅 = 親要素の幅 div:nth-of-type(2){ // margin-left を左のブロック要素の幅に設定します。 margin-left: 300px; 現在: 右側のブロック要素の幅 = 親要素の幅 - margin-left height: 220px; }</style><html> <div>div1</; div> <div >div2</div></html>1) margin-left 設定前
2) margin-left 設定後
実装 2: <style> body, html{padding:0; margin:0;} // CSS の配置に従って、フローティングまたは絶対配置を使用して、左側のブロック要素を通常のドキュメント フローから分離します div:nth-of-type(1 ){ float : left; // 位置: 絶対位置を使用します。 // 左: 0; 幅: 200 ピクセル; // FC は、通常の (通常の) ドキュメント ストリーム、フォーマット コンテキスト、ページ内のレンダリング領域、およびレンダリング仕様のセットです。 BFC はブロックレベルの書式設定コンテキストです。 // BFC ブロック レベルの書式設定コンテキストを使用して、分離された独立したコンテナを作成します。 div:nth-of-type(2){ // オーバーフローの値を非表示に変更し、BFC オーバーフローをトリガーします。 ; }</style><html> <div>div1</div> <div>div2</div></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。