ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これは、CSS レイアウトを学習するときに最もよくある問題です。以下に実際の例を示し、その後に詳細な説明を示します。 まず、ここをクリックして、実際の実行効果を確認してください。このページは、Mozilla、Opera、IE ブラウザで中央に配置され、高度に適応できます。コードを分析してみましょう: コードをコピー コードは次のとおりです。<html> <ヘッド> <スタイル タイプ="text/css"> 体{ 背景:#999; テキスト配置:中央; 色: #333; フォントファミリー:arial、verdana、sans-serif; } #ヘッダ{ 幅:776ピクセル; 右マージン: 自動; 左マージン: 自動; パディング: 0px; 背景: #EEE; 高さ:60px; テキスト配置:左; } #含む{ 右マージン: 自動; 左マージン: 自動; 幅: 776ピクセル; } #メインbg{ 幅:776ピクセル; パディング: 0px; 背景: #60A179; フロート: 左; } #右{ フロート: 右; マージン: 2px 0px 2px 0px; パディング:0px; 幅: 574ピクセル; 背景: #ccd2de; テキスト配置:左; } #左{ フロート: 左; マージン: 2px 2px 0px 0px; パディング: 0px; 背景: #F2F3F7; 幅: 200ピクセル; テキスト配置:左; } #フッター{ クリア:両方; 幅:776ピクセル; 右マージン: 自動; 左マージン: 自動; パディング: 0px; 背景: #EEE; 高さ:60px;} .text{マージン:0px;パディング:20px;} </スタイル> </head> <本文> <div id="header">ヘッダー</div> <div id="contain"> <div id="mainbg"> <div id="right"> <div class="text">右<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div> </div> <div id="左"> <div class="text">左</div> </div> </div> </div> <div id="footer">フッター</div> </本文> </html> コード分析: まず、本文と上部の最初の行 #header を定義します。ここで重要なのは、本文の text-align:center; とヘッダーの margin-right: auto;margin-left: auto; です。この 2 つの文によって、ヘッダーが中央に配置されます。注意: 実際、text-align:center; を定義すると IE ではすでに中央揃えが実現されていますが、Mozilla では無効です。Mozilla で中央揃えを実現するには、margin:auto; を設定する必要があります。 次に、中央の 2 つの列 #right と #left を定義します。中央の 2 つの列を中央に配置するには、それらの外側にレイヤー #contain をネストし、contain に margin:auto; を設定して、#right と #left が自然に中央に配置されるようにしています。 中央の 2 つの列が定義されている順序に注意してください。最初に #right を定義し、 float: right; を使用して、#contain レイヤーの右端にフロートさせます。次に、#left を定義し、float: left; を使用して、#right レイヤーの左側にフロートさせます。これは、以前にテーブルを左から右に定義した順序とまったく逆です (訂正: 左から右、または右から左の順序で実装できます。必要に応じて設計してください)。 コード内の #contain と 2 つの列の間にネストされたレイヤー #mainbg があることがわかります。このレイヤーは何に使用されるのでしょうか。このレイヤーは、#contain の背景を定義するために使用されます。余分なレイヤーを追加するのではなく、#contain で背景を直接定義しないのはなぜかと疑問に思うかもしれません。これは、#contain で直接定義された背景が Mozilla では表示されないため、高さの値を定義する必要があるためです。高さの値が定義されている場合、#right レイヤーはコンテンツに基づいて自動的に拡大縮小できません。背景と高さの問題を解決するには、このような #mainbg レイヤーを追加する必要があります。コツは、#mainbh レイヤーで float: left; を定義することです。これは、float によってレイヤーの幅と高さの属性が自動的に付与されるためです。 (とりあえず、このように理解しましょう:) 最後に、#footer レイヤーが下部を定義します。この定義の鍵となるのは、clear:both; です。これは、#footer レイヤーのフローティング継承をキャンセルします。そうしないと、#footer が #right の下ではなく、#header のすぐ横に表示されます。 メインレイヤーが定義されたので、レイアウトの準備が整いました。もう 1 つ追加する点: .text{margin:0px;padding:20px;} も定義していることがわかります。このクラスの目的は、コンテンツの周囲に 20 ピクセルの空白を作成することです。 #right で直接 margin または padding を定義しないのはなぜですか? Mozilla と IE は CSS ボックス モデルの解釈が異なるため、直接 margin/padding を定義すると、Mozilla でレイアウトが変形します。私は通常、内部に別のレイヤーを追加することでこの問題を解決します。 |
<<: Docker は MySQL をインストールし、中国語の文字化けの問題を解決します
>>: MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル
この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...
目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...
この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...
最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...
少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...
スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...
私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...