序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれています。 1つ目: float実装に基づく実装のアイデア 従来の考え方では、左と右の Aside をそれぞれ左側と右側に浮かせることになります。 コードの実装 <!-- HTML セクション --> <div class="コンテナ"> <!-- トップヘッダー --> <header>ここにヘッダーがあります</header> <!-- 脇に置き、中央にコンテンツを配置 --> <div class="middle clearfix"> <aside class="left"></aside> <aside class="right"></aside> <!-- 中央のコンテンツは、右側が圧迫されるのを防ぐために右の列の下に配置されます。 --> <div class="content">ここにコンテンツがあります</div> </div> <!-- フッター --> <フッター></フッター> </div> <!-- CSS セクション --> <スタイル lang="scss"> * { マージン: 0; パディング: 0; } .clearfix { ズーム: 1; &::後 { 表示: ブロック; コンテンツ: ' '; クリア:両方 } } html、本文{ 幅: 100%; 高さ: 100% } 。容器 { 幅: 100% 高さ: 100% ヘッダー { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5) } フッター { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5) } 。真ん中 { 高さ: calc(100% - 80px - 80px) 脇に 高さ: 100%; 幅: 300ピクセル; 背景: rgba(156, 154, 249, 1) } 。左 { フロート: 左 } 。右: { フロート: 右 } } } } </スタイル> 成果を達成する 2番目の方法:位置に基づく:絶対実装実装のアイデア 中央の 3 つの列の親に対して position: relative を割り当て、左と右の Aside 列に position: absolute を割り当て、それぞれ left: 0 と right: 0 width: custom 値を割り当てます。中央のコンテンツの左と右に、それぞれ左と右の幅と同じ幅を割り当てます。 コードの実装 <!-- HTML 関連コード--> <div class="コンテナ"> <!-- トップヘッダー --> <ヘッダー></ヘッダー> <div class="middle"> <!-- 脇に置いて --> <aside class="left"></aside> <!-- 中間コンテンツ --> <div class="content">ここにコンテンツがあります</div> <!-- 右側 --> <aside class="right"></aside> </div> <!-- フッター --> <フッター></フッター> </div> <!-- CSS 関連コード --> <スタイル lang="scss"> * { マージン: 0; パディング: 0 } html、本文{ 幅: 100%; 高さ: 100% } 。容器 { 幅: 100%; 高さ: 100%; ヘッダー { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } フッター { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } 。真ん中 { 高さ: calc(100% - 80px - 80px); 位置: 相対的; さて、 。コンテンツ { 位置: 絶対; } 。左 { 幅: 300ピクセル; 背景: rgba(156, 154, 249, 1); 左: 0; 高さ: 100%; } 。右 { 幅: 300ピクセル; 背景: rgba(156, 154, 249, 1); 右: 0; 高さ: 100%; } 。コンテンツ { 左: 300ピクセル; 右: 300px; } } } </スタイル> 成果を達成する 3番目の方法:ディスプレイに基づく:フレックス実装のアイデア 左、中央、右の列の親にdisplay: flexを指定し、左と右のAside幅にカスタム値を指定し、中央のコンテンツにflex:1を指定します。 コードの実装 <!-- HTML 関連コード--> <div class="コンテナ"> <!-- トップヘッダー --> <ヘッダー></ヘッダー> <div class="middle"> <!-- 脇に置いて --> <aside class="left"></aside> <!-- 中間コンテンツ --> <div class="content">ここにコンテンツがあります</div> <!-- 右側 --> <aside class="right"></aside> </div> <!-- フッター --> <フッター></フッター> </div> <!-- CSS セクション --> <スタイル lang="scss"> * { マージン: 0; パディング: 0; } html、本文{ 幅: 100%; 高さ: 100%; } 。容器 { ヘッダー { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } フッター { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } 。真ん中 { ディスプレイ: フレックス; 高さ: calc(100% - 80px - 80px); 脇に 幅: 300ピクセル; 背景: rgba(156, 154, 249, 1); } 。コンテンツ: { フレックス: 1; } } } </スタイル> 成果を達成する 4番目の方法:表示に基づく:テーブルの実装実装のアイデア 左、中央、右の列の親に display: table、width: 100% を指定し、左、中央、右の列にそれぞれ display: table-cell を指定し、左と右の Aside 幅をそれぞれ指定します。 コードの実装 <!-- HTML 関連コード--> <div class="コンテナ"> <!-- トップヘッダー --> <ヘッダー></ヘッダー> <div class="middle"> <!-- 脇に置いて --> <aside class="left"></aside> <!-- 中間コンテンツ --> <div class="content">ここにコンテンツがあります</div> <!-- 右側 --> <aside class="right"></aside> </div> <!-- フッター --> <フッター></フッター> </div> <!-- CSS セクション --> <スタイル lang="scss"> * { マージン: 0; パディング: 0; } html、本文{ 幅: 100%; 高さ: 100%; } 。容器 { ヘッダー { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } フッター { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } 。真ん中 { 表示: テーブル; 幅: 100% 高さ: calc(100% - 80px - 80px); 脇に 幅: 300ピクセル; 表示: テーブルセル; 背景: rgba(156, 154, 249, 1); } 。コンテンツ: { 表示: テーブルセル; } } } </スタイル> 成果を達成する 5番目: ディスプレイに基づく: グリッド実装実装のアイデア 左、中央、右の列の親に display: grid を指定し、grid-template-columns: 300px auto 300px を使用して、幅が 300px、auto、300px の 3 つの列に分割します。 コードの実装 <!-- HTML 関連コード--> <div class="コンテナ"> <!-- トップヘッダー --> <ヘッダー></ヘッダー> <div class="middle"> <!-- 脇に置いて --> <aside class="left"></aside> <!-- 中間コンテンツ --> <div class="content">ここにコンテンツがあります</div> <!-- 右側 --> <aside class="right"></aside> </div> <!-- フッター --> <フッター></フッター> </div> <!-- CSS セクション --> <スタイル lang="scss"> * { マージン: 0; パディング: 0; } html、本文{ 幅: 100%; 高さ: 100%; } 。容器 { ヘッダー { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } フッター { 高さ: 80px; 背景: rgba(0, 0, 0, 0.5); } 。真ん中 { 表示: グリッド; グリッドテンプレート列: 300px 自動 300px; 高さ: calc(100% - 80px - 80px); 脇に 背景: rgba(156, 154, 249, 1); } } } </スタイル> 成果を達成する 以上で、CSS での各種 3 列アダプティブ レイアウトの実装について詳細に解説した記事は終了です。CSS 3 列アダプティブ レイアウトに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySQL での select、distinct、limit の使用
>>: HTML でさまざまなスペースの特徴と表現を探る (推奨)
キーの入力を求められた場合は、[キーがありません]を選択します。デスクトップエクスペリエンスを選択す...
背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...
最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...
序文かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが...
バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...
1. 背景一般的に、データ ウェアハウス環境では、row_number 関数を使用して特定のディメン...
目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...
「スティッキーフッター」とはいわゆる「スティッキー フッター」は、新しいフロントエンドの概念や技術で...
この記事では、WeChatアプレットの宝くじ番号ジェネレータの具体的なコードを参考までに紹介します。...
データのバックアップと復元パート2は次のとおりです基本的な概念:バックアップ、現在のデータまたはレコ...
この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...
ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...
Ⅰ. 問題の説明: html+css を使用してシンプルなナビゲーション バーを実装します。 **...
黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...
3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...