この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリューションについて詳しく説明します。 a. フローティングレイアウトを使用する HTML構造は次のようになります <div class="box"> <div class="left">左</div> <div class="right">右</div> <div class="center">中央</div> </div> //ここで、左と右のフローティング要素を最初にレンダリングし、次に中央の要素をレンダリングする必要があることに注意してください。要素がフロートされた後、残りの兄弟ブロックレベル要素は親要素の幅を占めるようになります。<style> 。箱{ 高さ:200px; } 。左{ フロート:左; 幅:300ピクセル; } 。右{ フロート:右; 幅:300ピクセル; } </スタイル> b. 固定位置を使用する HTML構造は次のようになります <div class="box"> <div class="left">左</div> <div class="right">右</div> <div class="center">中央</div> </div> // フローティング レイアウトと同様に、最初に左と右の要素をレンダリングして、親要素の左端と右端に配置し、残りの中央の要素が親要素の残りの幅を占めるようにします。 <スタイル> 。箱{ 位置: 相対的; } 。左{ 位置: 絶対; 幅: 100ピクセル; 左: 0; } 。右{ 幅:100ピクセル; 位置: 絶対; 右: 0; } 。中心{ マージン: 0 100px; 背景: 赤; } </スタイル> c. テーブルレイアウト 親要素を display:table に設定し、子要素を display:table-cell に設定すると、インライン ブロックになります。 このレイアウトの利点は互換性が優れていることです。 <div class="box"> <div class="left"> 左 </div> <div class="center"> 中心 </div> <div class="right"> 右 </div> </div> <スタイル> 。箱{ 表示: テーブル; 幅: 100%; } 。左{ 表示: テーブルセル; 幅: 100ピクセル; 左: 0; } 。右{ 幅:100ピクセル; 表示: テーブルセル; } 。中心{ 幅: 100%; 背景: 赤; } </スタイル> d. 柔軟なレイアウト 親要素 display:flex の子要素はすべて一列に配置されます。 子要素のflex:nの幅は親要素の幅になります/n flex:1 の場合、幅は親要素の高さと同じになります。 エラスティック レイアウトの欠点は互換性がないことです。現在、IE ブラウザではエラスティック レイアウトを使用できません。 <div class="box"> <div class="left"> 左 </div> <div class="center"> 中心 </div> <div class="right"> 右 </div> </div> <スタイル> 。箱{ ディスプレイ: フレックス; 幅: 100%; } 。左{ 幅: 100ピクセル; 左: 0; } 。右{ 幅:100ピクセル; } 。中心{ フレックス:1; } </スタイル> e. グリッドレイアウト 親要素 display:grid; グリッドテンプレート列:100px 自動 100px; 最初の子要素の幅は 100 ピクセル、2 番目はアダプティブ、3 番目は 100 ピクセルの幅です。 グリッドレイアウトの利点は、非常にシンプルで、親要素のスタイルによって直接決定されることです。欠点は、互換性が高くないことです。 <div class="box"> <div class="left"> 左 </div> <div class="center"> 中心 </div> <div class="right"> 右 </div> </div> <スタイル> 。箱{ 表示: グリッド; グリッドテンプレート列: 100px 自動 100px; 幅: 100%; } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法
>>: CentOS 8 に Docker をインストールする詳細なチュートリアル
Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...
フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...
HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1...
3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...
目次1. 環境整備2. Dockerをインストールする3. MySQLマスタースレーブデータベースを...
目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...
Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....
文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...
まず、よくある質問は、ECMAScript と JavaScript の関係は何ですか? ECMAS...
要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...
目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...
目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...
CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...
設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...