1. 絶対位置とマージンを使用する この方法の原則は、左側と右側をドキュメントの流れから外れるように配置することです。 中央の領域はそれらの下に自然に流れ、それらの余白値を設定します この方法では、ページ要素構造の順序を自由に変更できます。ただし、先頭の値を処理しないと、位置がずれる可能性があるので注意してください。 html <div id='コンテナ'> <div class='left'>左側</div> <div class='center'>中央</div> <div class='right'>右側</div> </div> CS #容器 { 位置: 相対的; } .左、.右{ 位置: 絶対; 上: 0; 幅: 200ピクセル; 最小高さ: 500px; 背景色: 赤; } 。左 { 左: 0; } 。右 { 右: 0; } 。中心 { マージン: 0px 210px; 最小高さ: 500px; 背景色: 黄色; } 2. フロートとマージンを使用する この方法の原理は、左側と右側をフロートさせてドキュメントフローから外し、中央部分を通常のドキュメントフロー内にして、その余白値を設定することです。 この方法では、中央部分を最後に配置する必要があります。ウィンドウが特に小さい場合は、右側が圧迫されます。 html <div id='コンテナ'> <div class='left'>左側</div> <div class='right'>右側</div> <div class='center'>中央</div> </div> CS #容器 { 位置: 相対的; } .左、.右{ 幅: 200ピクセル; 最小高さ: 500px; 背景色: 赤; } 。左 { フロート: 左; } 。右 { フロート: 右; } 。中心 { 最小高さ: 500px; マージン: 0px 210px; 背景色: 黄色; } 3. 聖杯レイアウト この方法は最も一般的であり、3 つは相互に関連しており、最も堅牢です。 まず、真ん中の部分を前面に置き、容器の層で包みます。外側のコンテナにより画面全体の 100% を占め、左側、中央、右側はすべて float: left になります。 中央の左余白と右余白を両側のコンテナの幅に余白を加えた値に設定し、左の margin-left を -100% に設定して左端に表示し、右の margin-right を -200px に設定して右端に表示します。 html <div id='コンテナ'> <div class='center_wrap'> <div class='center'>中央</div> </div> <div class='left'>左側</div> <div class='right'>右側</div> </div> CS #容器 { 位置: 相対的; } .center_wrap、.left、.right{ フロート: 左; 最小高さ: 500px; } .center_wrap { 幅: 100%; } .center_wrap .center{ 最小高さ: 500px; マージン: 0px 210px; 背景色: 黄色; } .左、.右{ 幅: 200ピクセル; 背景色: 赤; } 。左 { 左マージン: -100%; } 。右 { 左マージン: -200px; } 4. CSS3 フレックス html <div id='コンテナ'> <div class='left'>左側</div> <div class='center'>中央</div> <div class='right'>右側</div> </div> CS #容器 { 幅: 100%; ディスプレイ: フレックス; } .左、.右{ 幅: 200ピクセル; 背景色: 赤; 最小高さ: 500px; } 。中心 { フレックス: 1; 最小高さ: 500px; マージン: 0 10px; 背景色: 黄色; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント
>>: JavaScript が Taobao の虫眼鏡効果を模倣
目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....
エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...
質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...
1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...
背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...
Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...
エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...
1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...
1. pytorch公式サイトから対応するインストールファイルをダウンロードします。 https:...
ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...
方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります(隙間がなくな...