基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 200px; } 。左{ フレックス:1; 背景: 赤; } 。真ん中{ フレックス:1; 背景: 緑; } 。右{ フレックス:1; 背景: 青; } <div class="コンテナ"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> 左と中央は固定幅、右は適応幅の3列 。容器{ ディスプレイ: フレックス; 高さ: 300px; } 。左{ フレックス: 0 0 100px; 背景色: 赤; } 。真ん中{ フレックス: 0 0 100px; 背景色: 緑; } 。右{ フレックス:1; 背景色: 青; } <div class="コンテナ"> <div class="left">qqq</div> <div class="middle">qqq</div> <div class="right">wwww</div> </div> ブラウザウィンドウを縮小した後 左右は固定、中央は適応型 。容器{ ディスプレイ: フレックス; 高さ: 300px; } 。左{ 幅: 100ピクセル; 背景色: 赤; } 。真ん中{ フレックス: 1; 背景色: 緑; } 。右{ 幅: 100ピクセル; 背景色: 青; } <div class="コンテナ"> <div class="left">qqq</div> <div class="middle">qqq</div> <div class="right">wwww</div> </div> ブラウザウィンドウを縮小した後 9グリッドレイアウト 。容器{ ディスプレイ: フレックス; 高さ: 300px; 幅: 300ピクセル; flex-direction: 列; } 。行{ ディスプレイ: フレックス; 高さ: 100px; } 。左{ フレックス: 1; 高さ: 100px; 境界線: 1px 実線の赤; } 。真ん中{ フレックス: 1; 高さ: 100px; 境界線: 1px 緑; } 。右{ フレックス: 1; 高さ: 100px; 境界線: 1px 青 } <div class="コンテナ"> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> </div> 聖杯レイアウト *{ マージン:0; パディング:0; } 。容器{ ディスプレイ: フレックス; flex-direction: 列; 最小高さ: 100vh; コンテンツの両端揃え: スペースの間; } 。ヘッダ{ 背景: 赤; フレックス: 0 0 100px; } 。コンテンツ{ ディスプレイ: フレックス; フレックス:1; } .content-left{ フレックス: 0 0 100px; 背景: 緑; } .コンテンツ右{ フレックス: 0 0 100px; 背景: ピンク; } .content-middle{ フレックス:1; } .フッター{ 背景: 黄色; フレックス: 0 0 100px; } <div class="コンテナ"> <div class="header">ヘッダー</div> <div class="content"> <div class="content-left">左</div> <div class="content-middle">中央</div> <div class="content-right">右</div> </div> <div class="footer">フッター</div> </div> ブラウザウィンドウを縮小した後 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: nacos が mysql に接続できない場合の解決策
今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...
必要な方はどなたでも参考にしてください。試してみて問題が見つかった場合は、メッセージを残してお知らせ...
バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...
FTP と比較すると、SSH ベースの sftp サービスは、セキュリティが優れており (非プレーン...
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...
ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...
目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...
目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...
カスケードとカスケードレベルHTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z ...
背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
すべての前提条件にはルート権限が必要です1. MySQLプロセスを終了する //Linux sudo...